Как центрировать изображение по горизонтали и выровнять его по нижней части контейнера?

Как я могу центрировать изображение по горизонтали и одновременно выровнять его по дну контейнера?

Мне удалось центрировать изображение по горизонтали самостоятельно. Я также смог выровнять дно контейнера самостоятельно. Но я не мог делать и то, и другое одновременно.

Вот что у меня есть:

.image_block {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}

<div class="image_block">
    <a href="..."><img src="..." border="0"></a>
</div>

Этот код выравнивает изображение по нижней части div. Что мне нужно добавить/изменить, чтобы он также центрировал изображение по горизонтали внутри div? Размер изображения заранее неизвестен, но он будет 175x175 или меньше.


css positioning
person Echo says Reinstate Monica    schedule 18.11.2008    source источник

Ответы (6)


arrow_upward
65
arrow_downward 

.image_block    {
    width: 175px;
    height: 175px;
    position: relative;
}

.image_block a  {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

.image_block img    {
/*  nothing specific  */
}

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

таким образом, элемент <a> будет располагаться относительно элемента .image_block, что даст нам выравнивание по нижнему краю. затем мы text-align: center элемент <a> и задаем ему ширину 100%, чтобы он был размером .image_block.

<img> внутри <a> будет центрирован соответствующим образом.

person Owen    schedule 18.11.2008
comment
Огромное спасибо. Это отлично работает в FF, IE6, IE7 и Chrome. - person Echo says Reinstate Monica; 18.11.2008

arrow_upward
20
arrow_downward

Это также работает (подсказка из этого вопроса)

.image_block {
  height: 175px;
  width:175px;
  position:relative;
}
.image_block a img{
 margin:auto; /* Required */
 position:absolute; /* Required */
 bottom:0; /* Aligns at the bottom */
 left:0;right:0; /* Aligns horizontal center */
 max-height:100%; /* images bigger than 175 px  */
 max-width:100%;  /* will be shrinked to size */ 
}
person vdua    schedule 04.01.2013
comment
Я решительно предпочитаю этот ответ. Очень хорошо. - person Michael P.; 14.10.2015

arrow_upward
4
arrow_downward

не будет

margin-left:auto;
margin-right:auto;

добавлено в .image_block img получилось?
Обратите внимание, что это не будет работать в IE6 (может быть, 7, не уверен)
там вам придется сделать .image_block контейнер Div

text-align:center;

position:relative; тоже может быть проблемой.

person Pim Jager    schedule 18.11.2008

arrow_upward
3
arrow_downward

Это сложно; причина, по которой это не удается, заключается в том, что вы не можете позиционировать с помощью поля или выравнивания текста, будучи абсолютно позиционированными.

Если изображение одно в div, то рекомендую что-то вроде этого:

.image_block {
    width: 175px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    vertical-align: bottom;
}

Вместо этого вам может понадобиться прикрепить вызов vertical-align к изображению; не совсем уверен без проверки. Однако использование vertical-align и line-height принесет вам гораздо больше пользы, чем попытка возиться с абсолютным позиционированием.

person One Crayon    schedule 18.11.2008

arrow_upward
0
arrow_downward

Удалите строку position: relative;. Я не уверен, почему именно, но это исправляет это для меня.

person Paige Ruten    schedule 18.11.2008
comment
position:relative для содержащего элемента требуется для абсолютного позиционирования элемента внутри него. - person Zack The Human; 18.11.2008

arrow_upward
0
arrow_downward

ты пытался:

.image_block{
text-align: center;
vertical-align: bottom;
}
person workmad3    schedule 18.11.2008