Центр img внутри div, вертикально-выровненный: средний

Я следовал учебному пособию, как центрировать img внутри div. Он использует выравнивание по вертикали и вертикальное выравнивание: среднее. Например, это код в скрипкой:Центр img внутри div, вертикально-выровненный: средний

<div id="ad_unit"> 
    <div class="logo"> 
     <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/> 
    </div>  
</div> 


.logo { 
    background-color: green; 
    position: absolute; 
    width: 138px; 
    height: 300px; 
    line-height: 300px; 
    text-align: center; 
} 

.logo img { 
    vertical-align: middle; 
}

Но изображение не центрирован, когда я пытаюсь поставить код в HTML-файл. Есть предположения?

источник

2013-05-06 Rex

Я просто понимаю, что есть этот DOCTYPE в моем html-файле: Если я избавлюсь от PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN "" http://www.w3.org/TR/ html4/loose.dtd ", это работает, какова логика этого? – Rex

Использование переходного режима вызовет много таких кварков, читайте здесь: http://en.wikipedia.org/wiki/Quirks_mode. Лучше всего удалить его, чтобы он отображался с помощью стандартов HTML5, поэтому просто используйте ''. – Justin

Я удалю его, спасибо большое. – Rex

HTML

<div id="ad_unit"> 
    <div class="logo"> 
     <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image" /> 
    </div> 
</div>

CSS

.logo { 
    background-color: #ccc; 
    height: 300px; 
    line-height: 300px; 
} 
.logo img { 
    vertical-align: middle; 
}

Пример: http://jsfiddle.net/justincook/yarzY/

источник

2013-05-06 22:53:46 Justin

Спасибо за ответ, мне интересно, как вы опубликовали ссылку на скрипку здесь, когда я попытался это сделать, я получил сообщение об ошибке «ссылка на скрипку должна быть выполнена кодом» – Rex

Кстати, у меня есть смещение 4px в строке-высоте, поэтому вместо строки-высоты: 300 пикселей, мне нужно сделать эту линию-высоту: 296px, чтобы сделать ее вертикально-центрированной. У вас есть идеи, почему это происходит? – Rex

Для ссылки я просто скопировал/вставлял URL-адрес. Обязательно сначала добавьте свой код, затем добавьте ссылку jsfiddle. Если вы попробуете еще раз, это может сработать. – Justin

Может быть, эта маленькая хитрость поможет вам. Я использую встроенный блокирующий DIV для этого:

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

<div id="ad_unit"> 
<div class="logo"> 
    <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/> 
    <div class="vcenter"></div> 
</div>

и CSS

.logo { 
    background-color: green; 
    text-align: center; 
    height: 300px; 
} 

.logo img { 
    vertical-align: middle; 
} 

.logo .vcenter { 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
}

Demo on JSFiddle

источник

2013-05-06 23:15:43 fje

Центр img внутри div, вертикально-выровненный: средний

ответ

Смежные вопросы