一般的な画像や文字を上下中央に寄せる方法といえば
**text-align: center;やmargin: 0 auto;**が有名ですよね。
しかし、それをしたのに、画像が上下中央真ん中に寄ってくれない、効かない。
一つ打つだけで、効く動作なのになぜか効かなくて困りましたが、解決できたので、ここに書こうと思います。
元のコード
- HTML
<header>
<div class="abc">
<img src="" alt="" />
</div>
</header>
- CSS
header {
background-color: #FFFF;
}
.abc{
float: left;
/* margin : 0 auto; */
width:70%;
}
解決方法
結論から言うと、text-align: center;の入れる場所とdivタグを消すことで直りました。
- HTML
<header>
<img src="" alt="" />
</header>
abcというdivタグを削除
- CSS
header {
text-align: center;
}
cssの部分もabcクラスhtmlから消したので、削除
CSSのヘッダーに**text-align: center;**
と直接書き込むことによって、解決することができました。
imgやdivタグに入れないように注意してください。
コードを複雑にしないために注意したい点
-
floatを使わない
floatはProgateなどを使っていると、教えてもらいますが、ややこしくなる原因で有名ですし、みんなも使っていないので、使わない方がいいです。 -
widthを定義しない
widthを一度定義してしまうと、他のwidthと差ができてしまって、空白の部分が出てきてしまいます。
なので積極的に、使わない方がいいです。