web-dev-qa-db-ja.com

画像を水平方向に中央揃えしてコンテナの下部に揃える方法は？

画像を水平方向に中央揃えし、同時にコンテナの下部に揃えるにはどうすればよいですか？

私は自分自身で画像を水平方向に中央揃えすることができました。また、コンテナの底面を自分で調整することもできました。しかし、私は両方を同時に行うことはできませんでした。

ここに私が持っているものがあります：

.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以下です。

csspositioning
39
Echo
.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>要素を使用し、.image_blockのサイズになるように100％の幅を与えます。

<img>内の<a>が適切に中央に配置されます。

65
Owen

これも機能します（これからヒントを得ました 質問 ）

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

しません

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

.image_blockに追加されました。
IE6では動作しないことに注意してください（おそらく7不明）
.image_blockコンテナDivで行う必要があります

text-align:center;

position:relative;も問題になる可能性があります。

3
Pim Jager

これには注意が必要です。それが失敗する理由は、絶対に配置されている間は、マージンまたはテキスト揃えで配置できないことです。

画像がdiv内で単独の場合、次のようなものをお勧めします。

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

代わりに、vertical-align呼び出しを画像に貼り付ける必要があります。テストせずに本当に確かではありません。ただし、vertical-alignとline-heightを使用する方が、絶対位置を調整するよりもはるかに適切に処理できます。

3
One Crayon

position: relative;行を削除します。正確な理由はわかりませんが、修正されています。

0
Jeremy Ruten

やってみました：

.image_block{
text-align: center;
vertical-align: bottom;
}
0
workmad3
#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>
0
dfortun