iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 3

Day3--水平置中(3)

使用justify-content: center;

  • 想讓元素使用彈性布局,需給其父元素設置display:flex
  • 生效條件
    1.給父元素設置justify-content: center;,子元素即可水平置中。
  • 範例
   .parent{
      display: flex;
      justify-content: center;
      width: 500px;
      height: 100px;
      border:2px solid green;
 }
   .child{
      width: 100px;
      height: 30px;
      border: 2px solid blue;
 }
    <div class="parent">
        <div class="child"></div>
    </div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20200917/20129568lflRI6GqlQ.png

上一篇
Day2--水平置中(2)
下一篇
Day4--水平置中(4)
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言