CSSで要素を横並びにする6つの方法
CSSで要素を中央寄せにする方法はいくつかあります。その中でよく使うものを中心にまとめました。
① float
親要素にclearfixをいれることが必須条件。
中央寄せができない。
バナーを真ん中に増やしたいときは選択肢から外れる。
右と左に配置する要素があるときに用いる。
.float{
float: left;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
③ inline-block
横並びにするときはこれを用いることが多い。
以下記述をして、不要な隙間をなくす必要がある。
.inline-block_container{
letter-spacing: -0.4em;
font-size : 0;
text-aline: center;
}
.inline-block{
display: inline-block;
letter-spacing: normal;
vertical-align: top;
}
④ table-cell
ずっと改行しない。
要素のセンター寄せができる。
.table-cell_container{
display: table;
}
.table-cell{
display: table-cell;
}
④ box
対応ブラウザが少ない
.box_container{
display:-webkit-box;
}
⑤ column-count
親要素につけるだけだが、対応ブラウザが少ない
.column-count_container{
column-count: 5;
}
⑥ grid
.grid_container {
display: grid;
grid: repeat(2, 70px)
/ auto-flow 70px;
}
CSSで横並びにするときは、①floatと②inline-blockを使用することが多いです。 横並びをマスターすると、コーデイングも速くなりサイト作成がますます楽しくなっていきますので、ぜひ使ってみてくださいね！