>>>征服中央揃え<<
2854 ワード
1.Block要素
text-aline: center;
ブロック要素または表のセル・ボックスの水平方向の配置を設定します.
text-alignのcentt,right,left valueは行内の内容をソートします.
ではdiv>div内のtxtはソートできませんか?いいえ.
txt自体が行内要素なのでソートできます.
重要なのはtext-alignを適用したdivのdivが中央に位置合わせできないことです!ここで、txtのみが属するブロック要素の中で中央に位置します.
親divでtext-alin:center;与えられた状態
blockにwidth値を与え、marify:auto use
composition:絶対値と余白値の使用
すべての水平垂直位置合わせをしてみます.
親divと子divが存在すると仮定すると、
親divでの合成:相対;値段をつける
child divで合成:absolute;値が指定されている場合は、divの左上隅の頂点ごとにtop、bottom、left、right propertyが適用されます.
ただし、child divのwidthとheight値が存在する必要があります.<style>
.childDiv {
top: 50%;
left: 50%;
margin-top: -((childDiv의 height)/2)px;
margin-left:-((childDiv의 width)/2)px;
}
</style>
出典:https://88240.tistory.com/391[振動blog]
これによりmargin値を水平および垂直に位置合わせできます.
display:table,tablecellを使用する
この方法を使用するかどうかはわかりませんが、tableはtext-alignも適用されるので、display値を変更することで中央ソートができます.
ここで確認https://saimplay.tistory.com/115
2.行内要素
inline要素はblockの中央ソート方法を直接適用しません.
ブロックの中央ソート方法の取得
<style>
.childDiv {
top: 50%;
left: 50%;
margin-top: -((childDiv의 height)/2)px;
margin-left:-((childDiv의 width)/2)px;
}
</style>
inline要素はblockの中央ソート方法を直接適用しません.
ブロックの中央ソート方法の取得
<div>
で縛ります.display: inline-block;値をつける.
Reference
この問題について(>>>征服中央揃え<<), 我々は、より多くの情報をここで見つけました https://velog.io/@daeun/가운데정렬-정복テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol