Выравнивание двух div?

Question

бит CSS newb здесь. Я использую раскладку флюида в Dreamweaver CS6. Я создал divcontainer div, затем заголовок и headright div внутри. Я добавил изображение в заголовок и набрал текст в headerright. Я хочу, чтобы текст оставался в соответствии с центром изображения, независимо от изменения размера макета.

Каков наилучший способ для этого? Я помещал два заголовка в контейнерный div, надеясь, что это облегчит мне выравнивание двух div в контейнере, но я просто не уверен, как его достичь. Вот код, который я в настоящее время в этом разделе страницы:

EDIT: Код теперь говорит (но по-прежнему не работает):

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 90.5666%; 
    padding-left: 0.2166%; 
    padding-right: 0.2166%; 
} 
#headercontainer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
} 
#headerleft { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 49.7607%; 
} 
#headerright { 
    clear: none; 
    margin-left: 0.4784%; 
    width: 49.7607%;   
} 

И HTML говорит:

<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    </div> 

Большое спасибо!

Answer 1

удалить display:block; из ваших #headerleft и #headerright

Кроме того, вы можете установить только float:left; на headerleft идентификатор, и поставить DIV headerright перед левой в вашем HTML коде.

Answer 2

Попробуйте этот код:

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
#headercontainer { 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
    position:relative; 
} 
#headerleft { 
    float: left; 
    margin-left: 0; 
    width: 50%; 
} 
#headerright { 
    clear: none; 
    margin-left: 50%;  
} 


<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 

    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    </div> 
</div>