Как я могу центрировать <h1>, когдарядом с этим? - PullRequest
Новая
       60

Как я могу центрировать <h1>, когдарядом с этим?

6 голосов
/ 06 января 2012

У меня проблема с созданием приличного заголовка в CSS. Мне нужен заголовок <h1>, который выравнивает содержимое по центру родительского элемента <div>. Иногда, хотя может быть дополнительный логотип, отображаемый как обычный <img />, который должен быть выровнен по left .

Это мой пример кода: 

<div class="container">
    <div class="logo">
        <img src="http://www.oldfirestation.co.uk/logo_brand_example_86.jpg" />
        <h1>Not center?</h1>
    </div>
    <div class="more">
        This is the center
    </div>
</div>

И мой CSS: 

body {
    background-color: #161616;
}

div.container {
    background-color: #fff;
    width: 70%;
    margin: auto;
}

div.logo img {
     width: 200px;   
    float: left;
}

h1 {
    text-align: center;
    font-size: 1.4em;
    margin: 0px auto;
    padding: 0px 0px 5px 0px;  
    width: 50%;
}

div.more {
    text-align: center;
    margin-top: 50px;
    clear: left;
}

Проблема в том, что когда я показываю <img />, мой <h1> текст имеет НЕ по центру. Если я уберу это <img />, это ... Как я могу это исправить ??

Я сделал пример на JSFiddle здесь: http://jsfiddle.net/8B9ZF/

Ответы [ 3 ]

4 голосов
/ 06 января 2012

Вам так: 

div.logo img {
     width: 200px;   
    vertical-align:middle;
}

h1 {
    text-align: center;
    font-size: 1.4em;
    margin: 0px auto;
    padding: 0px 0px 5px 0px;  
    width: 50%;
    display:inline-block;
}

http://jsfiddle.net/8B9ZF/8/

Может быть, вы можете изменить наценку

http://jsfiddle.net/8B9ZF/24/

0 голосов
/ 06 января 2012

http://jsfiddle.net/8B9ZF/27/

это всегда должно работать, насколько я знаю! в основном это просто добавляет скрытый переполнение, что заставляет h1 знать пространство, занимаемое плавающим элементом, так что он занимает оставшуюся область! 

body {
    background-color: #161616;
}

div.container {
    background-color: #fff;
    width: 70%;
    margin: auto;
}
div.logo{
overflow:hidden
}
div.logo img {
     width: 200px;   
    float: left;
}

h1 {
    text-align: center;
    font-size: 1.4em;

    padding: 0px 0px 5px 0px;  

}

div.more {
    text-align: center;
    margin-top: 50px;
    clear: left;
}
0 голосов
/ 06 января 2012

Если вы сделаете изображение абсолютно позиционированным в 0,0 вместо плавающего, то оно не вытолкнет H1 из центра. Но тогда вы рискуете наложить изображение на текст, если изображение слишком широкое или контейнер заголовка слишком маленький. Чтобы противостоять этому, вы, вероятно, захотите добавить отступы слева / справа от контейнера

...