Как центрировать fic горизонтально?

Question

У меня есть два divs на веб-странице. Один плавает влево, а один плавает вправо. Я хочу, чтобы они оба всегда были центрированы по горизонтали, чтобы все внутри этих div всегда находилось в середине страницы.

CSS:

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

Я хочу, чтобы обе дивы, чтобы всегда быть в центре по горизонтали. Я попробовал margin-top: 50% и margin-bottom: 50%, но это не работает.

Answer 1

Вы имели в виду что-то вроде этого? `

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

Answer 2

Пробуйте использовать text-align:center. Если вы используете его в div, который содержит #appinfodiv и #appImgDiv, вы должны иметь возможность центрировать div без необходимости их плавать.

Кроме того, вместо плавающих контейнеров попробовать

display:inline-block 
vertical-align:top; 

Вы, возможно, потребуется немного уменьшить ширину, чтобы держать их на одной и той же линии.