如何水平居中fic？

我在網頁上有兩個div。一個向左浮動，另一個向右浮動。我希望它們都始終處於水平居中狀態，以便這些div內的所有內容始終位於頁面中間。如何水平居中fic？

CSS：

#appInfoDiv{ 
float: right; 
width: 60%; 
background-color: black; 
} 
#appImgDiv{ 
float: left; 
width: 40%; 
}

兩個我都想要的div總是在中心水平。我嘗試了保證金頂部：50％和保證金底部：50％，但它不起作用。

來源

2014-02-11 Guy

如果你使用的頂部和底部邊緣......你的意思是網頁或瀏覽器窗口內居中_vertically_？您將使用左右來管理_horizontal_職位。 –

你的意思是這樣嗎？ `

<div class="body"> 
    <div class="inner"> 
    <div id="appInfoDiv">First Div</div> 
    <div id="appImgDiv">Second Div</div> 
    </div>  
</div>

的CSS：

.body { 
display:block; 
position:relative; 
width:300px; 
height:200px; 
border:1px solid red; 
} 
.inner { 
position:absolute; 
left:50%; 
margin-left:-60px; 
top:50%; 
margin-top:-25px; 
width:120px; 
height:50px; 
background:green; 
max-width:1400px; 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
padding: 4px 0; 
} 
#appInfoDiv{ 
float: left; 
width: 60%; 
height:40px; 
background-color: black; 
} 
#appImgDiv{ 
float: left; 
width: 40%; 
height:40px; 
background-color: red; 
}

和小提琴：http://jsfiddle.net/nucleo1985/NcbHX/31/

來源

2014-02-11 23:35:17

嘗試使用text-align:center。如果你在包含#appinfodiv和#appImgDiv的div上使用它，你應該能夠中心div而不必浮動它們。

而且不是浮在容器嘗試

display:inline-block 
vertical-align:top;

您可能需要稍微降低寬度，讓他們在同一行。

來源

2014-02-11 23:25:51 steinmas

如何水平居中fic？

回答

相關問題