Вертикальное выравнивание изображения в родительском div с помощью css - PullRequest
Новая
       11

Вертикальное выравнивание изображения в родительском div с помощью css

6 голосов
/ 27 августа 2010

Так что я пытаюсь выровнять изображения по вертикали внутри контейнера div.Я попытался добавить вертикальное выравнивание: середина;родительскому div без удачи. 

    <div class="contributor_thumbnail"><img src="image.jpg"></div>
    <div class="contributor_thumbnail"><img src="image.jpg"></div>

.contributor_thumbnail {

    position: relative;
    display: block;
    float: left;
    width: 150px;
    height: 150px;
    line-height: 100%;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px;
    vertical-align: middle;
    border: 1px solid #bbbbbb;
    border-top: 1px solid #333;
    border-left: 1px solid #333;

}

Ответы [ 3 ]

6 голосов
/ 27 августа 2010

Что бы я сделал, это установил изображение как фоновое изображение. 

.contributor_thumbnail {
    /* Background image instead of using and img tag */
    background: url(image.jpg) center center no-repeat;
    position: relative;
    display: block;
    float: left;
    width: 150px;
    height: 150px;
    line-height: 100%;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 5px;
    border: 1px solid #bbbbbb;
    border-top: 1px solid #333;
    border-left: 1px solid #333;

}
1 голос
/ 27 августа 2010

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

HTML 

<div class="contributor_thumbnail">
<div class="content">
    <img src="image.jpg"> 
</div>
</div>

CSS: 

.contributor_thumbnail  {float:left; height:50%; margin-bottom:-120px;}
.content    {clear:both; height:240px; position:relative;}

Вдохновлен: Затерянный в лесу вертикально с центром в CSS .

0 голосов
/ 27 августа 2010 
.contributor_thumbnail img {
    margin-left: auto;
    margin-right: auto;
}

http://www.bluerobot.com/web/css/center1.html

...