LoginSignup
0
0

More than 3 years have passed since last update.

div 枠を付ける、ボックスを並べる、フレックスボックス

Last updated at Posted at 2020-04-17

枠を付ける


<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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0