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

Question

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

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

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

.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 или менее.

Answer 1

.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> будет соответственно отцентрирован.

Answer 2

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

.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 */ 
}

Answer 3

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

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

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

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

Answer 4

бы не

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

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

text-align:center;

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

Answer 5

#header2
{
   display: table-cell;
   vertical-align: bottom;
   background-color:Red;
}


<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
  <p>this is a test</p>
</div>
</div>

Answer 6

вы пробовали:

.image_block{
text-align: center;
vertical-align: bottom;
}

Answer 7

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