枠を付ける
<div style="
text-align: center; /* 文字を中央揃え/*
padding-top:15px; /* 上の余白15px/*
padding-bottom:15px;/* 下の余白15px/*
background-color:#333333;
color: white;
margin: 0 20px 0 20px;/* 余白 上 下 右 左/*
">
メディア掲載実績
</div>
ボックスを並べる
ul {
padding: 0;
justify-content: center;
background-color: red;
display: -webkit-flex;
display: flex;
list-style: none; /*黒点非表示/*
flex-wrap: wrap; /端で折り返す/*
}
li {
padding:5px;
margin: 5px;
background-color: white;
}
<div class="media-jisseki">
<ul>
<li>
リスト1
</li>
<li>
リスト2
</li>
<li>
リスト3
</li>
<li>
リスト4
</li>
<li>
リスト5
</li>
</ul>
</div>
スタイル指定
.media-jisseki {
background-color:#F5F5F5;padding-top:15px;padding-bottom:15px;margin: 0 20px 0 20px;
}
class="media-jisseki"
で使える。
真ん中に寄せたい
text-align: center
text-align: center !important
margin: auto