چرا margin:0px auto کار نمی کنه؟

[ABZiko]

سلام، یک سطر ایجاد کردم که مانند عکس زیر هستش :
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]

منم یه همچین مشکلی دارم.

می خواستم تاپیک ایجاد کنم که تاپیک شما رو دیدم . کدها :



<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]

مشکل من حل شد!

نباید float می دادم.

[Mori Bone]

سلام، یک سطر ایجاد کردم که مانند عکس زیر هستش :
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]

ممنون دوستان، من float دادم چون نیاز دارم که متن و اون زبان ها کنار هم قرار بگیرن، توی سایت stackoverflow نوشته باید display:inline-block بدی، این کار رو کردم ولی جواب نداد، چی کار باید بکنم؟

[2undercover]

وقتی از inline-block استفاده می کنید باید به تگ والد text-align بدهید تا موقعیت اون عنصر مشخص بشه.

[ABZiko]

متاسفانه بازم درست نشد!



.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]

درست شد! تشکر