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

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

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

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

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

Ответы

Ответ 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> затем центрируется соответствующим образом.

Ответ 2

Это также работает (был сделан намек на это question)

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

Ответ 3

не будет

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

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

text-align:center;

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

#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>