1

私は、スタックオーバーフローのさまざまな投稿や、画像のセンタリングに関する他のいくつかのサイトを読んでいます。一般的なガイドと思われるさまざまなサイトでこのコードを見つけました。

img  {
display: block;
margin-left: auto;
margin-right: auto;
     }

画像を中央に配置しようとしています。このコードでは中央に配置できません。text-align: center を使用して移動させることはできますが、これは最善の方法ではありません。私はjsfiddleを作りました。誰かが私を助けてくれないなら、それはありがたいです。ランダムな幅の値を追加することで、画像も動かすことができました。中心にあるかどうかに注目しているので、これが正しいアプローチだとは思いません。

申し訳ありませんが、実際の画像を表示できませんでしたが、img ロゴがプレースホルダーとして表示されています: jsFiddle

4

3 に答える 3

1

あなたのコードは問題なく動作するはずです。おそらく、あなたが私たちに見せていないものがもっとあるでしょう。ただし、ここでは 2 つの方法のデモを示します。

基本的に、img がdisplay: block;使用できる場合はmargin: 0 auto.

それがdisplay: inline(img タグのデフォルト) である場合、親要素が必要text-align: center;になります。

要約するコードを次に示します: http://jsbin.com/upuzav/1/edit

于 2013-07-13T17:11:57.677 に答える
0

すべての画像をhtmlで中央に配置しようとするのではなく、画像にクラスを割り当てます。このように、位置を変更したい場合は、img タグですべてを調整するのではなく、すばやく行うことができます。

CSS:

.center_image {
display: block;
margin-left: auto;
margin-right: auto }

あなたのイメージ:

<img src="your_image.jpg" class="center_image">
于 2013-07-13T17:13:05.093 に答える