css水平居中的問題

時間 2019-12-01

標籤 css 水平居中問題欄目 CSS 简体版

原文原文鏈接

第一對於行元素：align：center；
第二對於定寬塊狀元素： margin：auto；或者margin-left：auto；
margin-right：auto；css

水平居中總結-不定寬塊狀元素方法（一）

在實際工做中咱們會遇到須要爲「不定寬度的塊狀元素」設置居中，好比網頁上的分頁導航，由於分頁的數量是不肯定的，因此咱們不能經過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)html

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：spa

1.加入 table 標籤:code

爲何選擇方法一加入table標籤? 是利用table標籤的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），所以能夠看作一個定寬度塊元素，而後再利用定寬度塊狀居中的margin的方法，使其水平居中。htm

第一步：爲須要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。ip

第二步：爲這個 table 設置「左右 margin 居中」（這個和定寬塊狀元素的方法同樣）。get

舉例以下：it

html代碼：io

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代碼：table

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

2.設置 display: inline 方法：與第一種相似，顯示類型設爲行內元素，進行不定寬元素的屬性設置

第二種方法：改變塊級元素的 display 爲 inline 類型（設置爲行內元素顯示），而後使用 text-align:center 來實現居中效果。以下例子：

html代碼：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（設置li文本之間的間隔）*/ .container li{ margin-right:8px; display:inline; } </style>

這種方法相比第一種方法的優點是不用增長無語義標籤，但也存在着一些問題：它將塊狀元素的 display 類型改成 inline，變成了行內元素，因此少了一些功能，好比設定長度值。

3.設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

方法三：經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

咱們能夠這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分爲兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。

代碼以下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。