中央揃えblockとinline
9129 ワード
blockとinlineを区別することに慣れているので、両者の並べ替え方をしっかり整理しておくべきだと思います.
text−alignの考察から,親要素中のinlineコンテンツはtext−alignで中央揃えが可能であることが分かった.
(ただしここで疑問ですが、親タグがあれば中身はinline要素になるのでしょうか?また混同しました=>>いいえ!内容のすべてのinline要素がソートされます!
div > h1{야옹}であればdiv{text-align: center;}であれば、block要素h 1自体は中央ソートではなく、h 1の内容ニャンコは中央ソートです.)▲もちろん.blockはすでに1行いっぱい並んでいるので、本人はソートできるものは何もありません.今は内容を整理するのではなく、自分の中心を整理して並べ替えます.
テストするコード
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
* {
margin: 0;
font-weight: 500;
font-size: 16px;
}
.block {
width: 200px;
background-color: pink;
}
.inline {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<h1 class="block">h1은 블락</h1>
<span class="inline">span은 인라인</span>
</div>
</body>
</html>ここでは、ピンクのボックスと青のボックスのテキストを中央に揃えるのではなく、各ボックス自体を中央に揃えたいと思います.
まず
.blockを中央揃え
.block {
width: 200px;
background-color: pink;
margin: 0 auto; <==
}問題は
.inline.です..inline {margin: 0 auto;}をあげても動かない.おかしいですね.inlineはmarify-top|bottomは役に立たなくてもmarify-left|rightを食べることができますか?次のコードでtopとbottomができないか左であることを確認しました
.inline {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 100px;
}
しかしmargin:0 auto;食べない理由は何ですか?
inlineには空きスペースがないからです.
利用可能なスペースについては、梁振英のビデオを参照すると、より簡単に理解できます.
block要素はあなたが知っているように、行全体を占めています.すなわちwidthを用いて幅を調整し,幅以外の空間も他の要素の空間ではなく,block自身がいつでも利用できる空間である.また,この空きスペースはmarginに調整できる領域である.
逆に、inlineはコンテンツのサイズのみを占めているため、空き領域がありません.
まとめると、block要素は生まれながらにしてmargin領域があるが、spanはmarginを直接与えなければ、他のmargin領域がないため、
margin: 0 autoは役に立たないようだ.とにかく...空色の箱はどのように中央に揃えますか?Boxの両親に
.container text-align:centerをあげればいいです.(ここでh 1のテキストも中央揃えで、text-alignはサブアイテム(+サブアイテム)~)を継承するため)
.container {
text-align: center;
}
.block {
width: 200px;
background-color: pink;
margin: 0 auto;
}
.inline {
background-color: skyblue;
}Reference
この問題について(中央揃えblockとinline), 我々は、より多くの情報をここで見つけました https://velog.io/@losnah5h/block과-inline의-가운데-정렬テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol