アンカータグ内に含まれる画像を水平方向に中央揃えしようとしています。私はそれをブロックとして設定し、マージンを自動に設定してみましたが、運がありませんでした。私はそれをdivタグでラップして同じことをしようとしましたが、それでも運がありません。div内のdiv内でimgを中央に配置してみました。他の投稿を見ましたが、何も役に立たないようです。何をしても画像は左揃えになります。
### HTML
<div id="slideWrapper">
<h1 id="slideHeading">This is a Header</h1>
<hr/>
<div class="centerMe">
<a href="javascript:slidelink()" class="slideA">
<img src="./images/Slides/cheeseBoards.jpg" name="slide" id="slideImg"/>
</a>
</div>
<hr/>
<div class="centerMe">
<a href="javascript:slidelink()"class="slideA" id="slideText">Check out our services and other great stuff.</a>
</div>
</div>
### CSS
.centerMe {
margin-left: auto;
margin-right: auto;
border: 1px solid green;
text-align: center;
}
#slideWrapper {
border: 1px solid blue;
}
#slideImg {
display: block;
height:500px;
width:900px;
border:1px solid red;
margin-left: auto;
margin-right: auto;
}
物がどこに置かれているかがわかるように、すべての周りに境界線を付けました。なんらかの理由で画像がdivに含まれていないようです。これはとても単純なはずのようです。どんな助けでも大歓迎です。ありがとう。