簡單介紹HTML+CSS實現單列布局和水平置中布局的方法

來源:互聯網
上載者:User
這篇文章主要介紹了HTML+CSS實現單列布局水平置中布局的相關資料,需要的朋友可以參考下

水平置中布局

  1. 父元素text-align:center;子項目:inline-block;

  2. 優點:相容性好;

  3. 不足:需要同時設定子項目和父元素


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平置中布局</title><style>    *{      margin: 0;      padding: 0;    }    .parent {        width: 100%;        background: green;        text-align: center;    }    .child {        display: inline-block;        width: 800px;        height: 100px;        background: blue;    }</style></head><body><p class="parent">    <p class="child">1</p>    <p class="child">2</p>    <p class="child">3</p>    <p class="child">4</p>    <p class="child">5</p>    <p class="child">6</p></p></body></html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.