CSS - вертикально центрировать изображение внутри плавающего элемента - PullRequest
Новая
       7

CSS - вертикально центрировать изображение внутри плавающего элемента

13 голосов
/ 07 сентября 2010

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

Сделано много поисков по поиску решений, и шкаф, который я могу получить, находится ниже, когда div не находится в плавающем состоянии (однако это необходимо).Любые идеи будут с благодарностью! 

.class_name {
/*float: left*/
width:153px; 
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}

<div class="class_name">
    <a href=""><img src="image.jpg" alt="" /></a>
</div>

Ответы [ 3 ]

20 голосов
/ 14 октября 2010

Ну, вчера вечером я столкнулся с той же проблемой (для галерейного типа), и мне удалось найти решение после того, как я наткнулся на эту страницу .Я рад сообщить, что это также работает для плавающих элементов!

Хитрость заключается в том, чтобы дать внешнему элементу «display: table;» и внутренний элемент (содержащий img) «display: table»-cell; ". 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
    display: table;
    float: left;
    overflow: hidden;
    width: 153px; 
    height: 153px;
}

.class_name a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
</style>
</head>
<body>
    <div class="class_name">
         <a href=""><img src="image.jpg" alt="" /></a>
    </div>
</body>
</html>

Для IE8 вы должны быть в стандартном режиме.Для работы в IE7 необходимо дополнительное позиционирование: 

<!--[if lte IE 7]><style type="text/css">
.class_name {
    position: relative;
}
.class_name a {
    position: absolute;
    top: 50%;
}
.class_name img {
    position: relative;
    top: -50%;
    width: 100%;
}
</style><![endif]-->
0 голосов
/ 07 сентября 2010

Для этого доступно кросс-браузерное решение css: http://www.vdotmedia.com/blog/vertically-center-content-with-css/

0 голосов
/ 07 сентября 2010

Если высота фиксирована и вы знаете размер изображения, просто поместите изображение вручную.Используйте position:absolute;top:25px; на изображении или что-то в этом роде или добавьте поле к изображению: margin:25px 0;.

...