css中對齊方式有哪些

方式：1、用「text-align:center」樣式實現水平居中。 2.用「line-height:行高;」樣式實現垂直居中。 3.用「align-items:center;justify-content:center」樣式實現水平垂直居中。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css中對齊方式有哪些

#一、水平居中

• ##行內元素的水平居中

如果被設定元素為文字、圖片等行內元素時，在父元素中設定text-align:center實作行內元素水平居中，將子元素的display設定為inline-block，使子元素變成行內元素

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

• #塊狀元素的水平居中（定寬）

當被設定元素為定寬塊級元素時用text-align：center 就不起作用了。可以透過設定“左右margin”值為“auto”來實現居中的。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

• 塊狀元素的水平居中（不定定寬）

  
  

在實際工作中我們會遇到需要為“不定寬度的區塊級元素」設定居中，例如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能透過設定寬度來限制它的彈性。

可以直接為不定寬的區塊級元素設定text-align：center來實現，也可以為父元素加text-align:center 來實現居中效果。

當不定寬區塊級元素的寬度不要佔一行時，可以設定display 為inline 類型或inline-block（設定為行內元素顯示或行內區塊元素）

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>

#二、垂直居中

和水平居中一樣，這裡要講垂直居中，首先設定兩個條件即父元素是盒子容器且高度已經設定

子元素是行內元素，高度是由其內容撐開的

這種情況下，需要透過設定父元素的line-height為其高度來使得子元素垂直居中

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

三、水平垂直居中

在css標籤內，將display屬性設定為flex，實現flex佈局，再將align-items屬性設定為center(水平方向居中)，justify-content屬性設定為center（垂直方向居中）。即可設定為水平垂直居中。

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是css中對齊方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！