0

PHP スクリプトを使用して、特定の高さと幅に合わせて自動的に画像のサイズを変更しています (例: 元の画像は 200x100px、ターゲット ボックスは 180x180px、サイズ変更された画像は 180x90px)。

正常に動作しますが、画像を div 内の中央に配置するために使用される通常の CSS トリックでは、事前に寸法を知る必要があるようです。

私が見つけた唯一の回避策は、外側の div を に定義しdisplay:table;、画像を含むdiv を に定義することdisplay: table-cell;vertical-align: middle;text-align:center;です。

別の方法はありますか？

4

2 に答える 2

4

画像を整列するためのテキスト整列のベスト プラクティスではありません。

「text-align プロパティのトリッキーな点は、テキストのみを揃えることができることです。画像などのブロックレベルの要素を移動するために使用することはできません。一部のブラウザーは、このプロパティを使用して画像や表を揃えますが、信頼性は高くありません。 、あなたが見つけたように。」--ジェニファー・キルニン、About.com

  • 非推奨の img の属性 align="center" を使用できますが、使用しません。この方法では、タグとスタイルが混在し、さらに悪いことに、画像全体の周りに垂直方向と水平方向のスペースができます。

    <img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way

  • これを解決する最善の方法は、css を使用することです。画像をdivの背景として設定すると、divのスペースが画像のスペースになり、マージンを使用して配置できます。これらの他のテクニックのいずれかを使用してみることができますCSS Tricks's Absolute center an image

CSS background-image テクニック:

background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0      no-repeat; /* div horizontal center */
background:url('path_to_img') 0      center no-repeat; /* div vertical center */
于 2012-07-22T01:43:22.130 に答える
3

img タグを使用する必要があり、背景画像で div を台無しにしたくない場合は、次の方法を試すことができます。

http://jsfiddle.net/Nz6Nm/3/

.container
{
    width: 180px;
    height: 180px;
    background-color: #FF0000;
    line-height: 180px;
    font-size: 0;
    text-align: center;
}
.container img {
    vertical-align: middle;
}

font-size は、変な間隔を避けるために 0 に設定されています。line-height をコンテナーの高さと同じにすると、少なくとも画像の場合、vertical-align が垂直方向の中央として機能します。

これの利点は、画像を img タグに入れることができることです。これは、背景画像よりも意味的に喜ばしいものです。この方法は、コンテナーのサイズがわかっているが、その内側に配置したい画像のサイズが不明な場合に機能します。

編集: 別のフィドルへのリンクは次のとおりです: http://jsfiddle.net/Nz6Nm/4/

画像の上にテキストを配置する必要があるかもしれないとおっしゃっていたので、簡単な方法を示したかっただけです。このようにして、上部に 20px を追加します。180 x 180 に固執する必要がある場合は、ロジックを調整して適合させることができます。</p>

于 2012-07-22T02:01:11.563 に答える