2

私は単純なサイトを作成していますが、<img>タグを中央に配置できることがわかりましたが、たとえばtext-align: center;、id はブロック要素では機能しません。<div>誰かが私にどのようにtext-align機能するか、そしてそれを使用して画像を整列させることが神の練習であるかどうかを説明できますか?

事前にどうもありがとうございました ：）

アップデート

margin: 0 auto;また、状況によっては機能するものと、要素を中央に配置することを拒否するものについても知っています。

4

5 に答える 5

4

それはあなたの要件に完全に依存します。そうするにはさまざまな方法があります。1つはimg要素inlineであるため、に設定してblock使用margin: auto;するとcenter、img

img {
    display: block;
    margin: auto;
}

デモ

別の方法は、タグ自体でtext-align: center;はなく親要素で宣言する必要がある、試みようとしている方法です。親ではなくタグに使用しているとは思えません...上記のソリューションのどこをターゲットにしていますかタグなので、両者には違いがあります。imgtext-align: center;imgimg

デモ

ここの良い点は何ですか？

  • レベル要素を作成imgする必要はありません。block
  • の必要はありませんmargin: auto;

ここで悪い点は何ですか？

  • p内に要素がある場合、プロパティが継承divされているため、それらも中央揃えになります。align

デモ

では、今何をすべきか？p要素をleftusingプロパティに合わせtext-align: left;ます。ここでは、次のようにターゲットを設定pします。

これにより、画像が中央に配置さpれ、left

.wrap {
    text-align: center;
}

.wrap p {
    text-align: left;
}

デモ

最後になりましたが、CSSポジショニングを使用して、親要素をposition: relative;and に設定しposition: absolute;、imgタグに使用することもできます。プロパティ。この方法は、画像を垂直方向だけでなく水平方向にも中央揃えする必要がある場合に便利です。(このメソッドは修正が必要で、宣言する必要があります)top: 50%left: 50%heightwidthimgmargin-topmargin-leftheightwidth

于 2013-10-25T07:53:53.157 に答える
1 
<div>
 <img src="img.png">
</div>

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
于 2013-10-25T07:47:20.167 に答える
1

私のアドバイスは、テキストのみに text-align プロパティを使用することです (もちろん例外はあります)。画像を中央に配置するには、次のように簡単に実行できます。

img{
   display: block;
   margin: 0 auto;
}

宣言された幅のない「div」または任意のブロック要素を で中央揃えすることはできませんがmargin: 0 auto;、画像は中央揃えになります。「自動」はピクセルをカウントし、要素を中央に表示します

于 2013-10-25T07:52:22.663 に答える
1

プロパティtext-algin:centerは基本的にそれが言うことをします。textを中央に配置することになっています。中央に配置するテキストに直接適用するか、親 div に適用することができます。この場合、この div 内のすべてのテキストが中央に配置されます。

画像などを中央に配置するためのより良い方法は、margin: 0 auto;多くの人が既に提案しているように使用することです。autoを指定すると、ブラウザーは自動的に左右の余白を決定し、それらを等しく設定します。したがって、両方の余白が同じサイズになることが保証されます。これが、オブジェクトが水平方向の中央に配置される理由です。

それが役立つことを願っています!

于 2013-10-25T07:57:46.617 に答える