View Full Version : سوال: چرا margin:0px auto کار نمی کنه؟
ABZiko
سه شنبه 28 مرداد 1393, 23:51 عصر
سلام، یک سطر ایجاد کردم که مانند عکس زیر هستش :
122457122457
این هم کد های html :
<div class="explain">
<div class="langs">
<span class="fa">Fa</span>
<span class="ar">Ar</span>
<span class="en">En</span>
</div>
<div class="text">آموزشگاه رایانه پارسوا دارای ربع قرن تحربه و تخصص در آموزش کشور | Parsova Computer Classes</div>
این هم کد های css :
.explain{
width:100%;
height:auto;
background-color:#060;
padding:5px 0px;
overflow:hidden}
.langs{
width:80px;
margin-right:20px}
.fa,.ar,.en{
background-color:#000;
border-radius:5px;
font:12px 'Segoe UI';
color:#FFF;
padding:1px 5px;
transition:ease 300ms}
.fa:hover,.ar:hover,.en:hover{
background-color:#F60}
.text{
width:490px;
font:12px 'Segoe UI';
color:#FFF;
margin:0px auto}
.langs,.text{
float:right}
ولی متن نمی آد وسط!!! چرا؟
esteftaats
چهارشنبه 29 مرداد 1393, 09:51 صبح
منم یه همچین مشکلی دارم.
می خواستم تاپیک ایجاد کنم که تاپیک شما رو دیدم . کدها :
<div class="main-wrapper">
<div class="main_contact">
<div class="contactus">
<div class="contactus-box">
<iframe src="https://www.google.com/maps/embed?pb=!1d25658.41028319578!" width="250" height="200" frameborder="0" style="border:0"></iframe>
</div>
</div>
</div>
</div>
اینم کدهای css:
.main-wrapper{margin-top:0px;height:auto;width:100%;border:5px;}
.main_contact{width:900px;height:auto;margin:auto; margin-top:35px;float:right;}
.contactus{width:900px;height:240px;float:right;ba ckground:url('images/contact.png') no-repeat;margin-top: 150px;margin-bottom: 150px;}
.contactus-box{width:250px;height:200px;float:left;background-color:White;border-radius:8px;margin-left:25px;margin-top:5px;}
esteftaats
چهارشنبه 29 مرداد 1393, 11:56 صبح
مشکل من حل شد!
نباید float می دادم.
Mori Bone
چهارشنبه 29 مرداد 1393, 13:02 عصر
سلام، یک سطر ایجاد کردم که مانند عکس زیر هستش :
122457122457
این هم کد های html :
<div class="explain">
<div class="langs">
<span class="fa">Fa</span>
<span class="ar">Ar</span>
<span class="en">En</span>
</div>
<div class="text">آموزشگاه رایانه پارسوا دارای ربع قرن تحربه و تخصص در آموزش کشور | Parsova Computer Classes</div>
این هم کد های css :
.explain{
width:100%;
height:auto;
background-color:#060;
padding:5px 0px;
overflow:hidden}
.langs{
width:80px;
margin-right:20px}
.fa,.ar,.en{
background-color:#000;
border-radius:5px;
font:12px 'Segoe UI';
color:#FFF;
padding:1px 5px;
transition:ease 300ms}
.fa:hover,.ar:hover,.en:hover{
background-color:#F60}
.text{
width:490px;
font:12px 'Segoe UI';
color:#FFF;
margin:0px auto}
.langs,.text{
float:right}
ولی متن نمی آد وسط!!! چرا؟
شما هم float دادین.
.langs,.text{
float:right}
ABZiko
چهارشنبه 29 مرداد 1393, 17:27 عصر
ممنون دوستان، من float دادم چون نیاز دارم که متن و اون زبان ها کنار هم قرار بگیرن، توی سایت stackoverflow نوشته باید display:inline-block بدی، این کار رو کردم ولی جواب نداد، چی کار باید بکنم؟
2undercover
چهارشنبه 29 مرداد 1393, 18:43 عصر
وقتی از inline-block استفاده می کنید باید به تگ والد text-align بدهید تا موقعیت اون عنصر مشخص بشه.
ABZiko
چهارشنبه 29 مرداد 1393, 18:47 عصر
متاسفانه بازم درست نشد!
.explain{
width:100%;
height:auto;
background-color:#3498DB;
text-align:center;
overflow:hidden}
.langs{
width:200px;
margin-right:20px}
.fa,.ar,.en{
background-color:#000;
border-radius:5px;
font:12px 'Segoe UI';
color:#FFF;
float:right;
margin:5px;
padding:3px 5px;
transition:ease 300ms}
.fa:hover,.ar:hover,.en:hover{
background-color:#F60}
.text{
width:490px;
display:inline-block;
font:12px 'Segoe UI';
line-height:35px;
color:#FFF;
margin:0px auto}
.langs,.text{
float:right}
ABZiko
چهارشنبه 29 مرداد 1393, 18:51 عصر
درست شد! تشکر
vBulletin® v4.2.5, Copyright ©2000-1403, Jelsoft Enterprises Ltd.