Центр Элементы Внутри Div

Question

У меня есть DIV, где нужно быть сосредоточены элементы:

<div style="width:800px;margin:0 auto;color:#000;"><h3 style="float:left;color:#000;margin:0 10px;"> Test </h3><h4 style="float:left;padding-top:3px;"> | </h4><h3 style="color:#000;float:left;margin:0 10px;"> Test </h3></div> 

Однако все элементы просто остаться слева. Как исправить это и центрировать все h3 и h4?

Вот мой пример: http://approvemyride.ca/reno/

Answer 1

http://jsfiddle.net/ZeJdc/

HTML:

<div> 
    <h3> Test </h3> 
    <h4> | </h4> 
    <h3> Test </h3> 
</div> 

CSS:

div { 
    width: 800px; 
    margin: 0 auto; 
    color: #000; 
    text-align: center; 
} 

h3 { 
    color: #000; 
    margin: 0 10px; 
    display: inline-block; 
} 

h4 { 
    padding-top: 3px; 
    display: inline-block; 
} 

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

Чтобы уточнить, display:inline-block - это то, что позволяет отображать все заголовки в одной строке, а text-align:center - это то, что центрирует все ваши элементы заголовка внутри <div>.

Answer 2

Всякий раз, когда я сталкиваюсь с какой-либо плавал контейнер для центрирования по горизонтали я использую следующее. Попробуйте обертывание разметку (которая должна быть сосредоточена, в div в вашем случае) с этим:

<div class="center_outer"> 
    <div class="center_inner"> 
     <!-- Put your contents here (which needs to be centered) --> 
    </div> 
</div> 

CSS:

.center_outer 
{ 
    position: relative; 
    left: 50%; 
    float: left; 
} 
.center_inner 
{ 
    position: relative; 
    left: -50%; 
} 

Проверил: http://jsfiddle.net/jduDD/1/ (я удалил width стиль)