css 中央揃えがうまくいかない

Question

現在wordpressで使用するcssを編集しているのですが画像の中央揃えがうまくいきません。
アドバイスいただけると幸いです。

<div class = "hoge">
 <ul>
  <li>
   <a><img src ~~~~></img></a>
  </li>
  <li>
   <a><img src ~~~~~</img></a>
  </li>
  ....
  .....
  .....
 </ul>
 </div>

上記のような構造になっているのですがaタグの中のimg属性を中央揃えにしたいのですが
うまくいかないです。

.hoge ul li a img {
  display: block;
  margin: 0 auto;
}

Comments

[root_jp]

記載されているHTMLとCSSですと、
きちんと画像が中央になっているようですけど、どううまくいかないんですか？

[makoto-n]

スクリーンショットとかいただけませんか？

Answer 1

<div class = "hoge">
 <ul>
  <li>
   <a><img src ~~~~/></a>
  </li>
  <li>
   <a><img src ~~~/></a>
  </li>
  ....
  .....
  .....
 </ul>
 </div>

<img>に</img>は要りません。

.hoge ul li a{
  display: block;
 width:適度な長さ;
  text-align:center;
}

display:block;はliないしaタグにかけるべきでは？

Comments

[退会済みユーザー]

li は display: block; がデフォルトです。
ご存知のことと思いますが念のため…

[退会済みユーザー]

ぁ...大変失礼しましたｗ
余計な事書いちゃいましたね..^^;;
liはブロック要素です.. block指定は不要です。

[think49]

li要素のデフォルトスタイルシートは display: list-item; ですね。

Answer 2

こちらでもう一度確認したらfloat leftがいつの間にかついてたせいでうまく動いてませんでした

Answer 3

こちらでもう一度確認したらfloat leftがいつの間にかついてたせいでうまく動いてませんでした

Answer 4

画像に直接CSSを指定したい場合は、widthを指定しなければなりません。

.hoge ul li a img {
  width: 100px;
  display: block;
  margin: 0 auto;
}

画像に指定する必要がない場合は、

.hoge ul li {
  text-align: center;
}

ですね。
また、CSSの子孫継承はできるだけ余計なタグを削るのがベターです。
例えば .hoge 内の画像にCSS指定をしたい場合は、

.hoge ul li a img {}

ではなく、

.hoge img {}

が良いです。