CSS水平居中總結_ZenDei技術網路在線

CSS水平居中總結

-Advertisement-

行內元素如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text align:center 來實現的。 html代碼： css代碼：塊狀元素定寬塊狀元素定寬塊狀元素：塊狀元素的寬度width為固定值。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“a ...

行內元素

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。

html代碼：


<body> 

<div class="txtCenter">我想要在父容器中水平居中顯示。</div> 

</body>

css代碼：


<style>  

.txtCenter{

    text-align:center;  

} 

</style>

塊狀元素

定寬塊狀元素

定寬塊狀元素：塊狀元素的寬度width為固定值。

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。

html代碼：


<body>  

<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> 

</body>

css代碼：


<style> 

div{    

    border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/        

    width:200px;/*定寬*/    

    margin:20px auto;/* margin-left 與 margin-right 設置為 auto */ 

} 

 </style>

也可以寫成：


margin-left:auto; 

margin-right:auto;

註意：元素的“上下 margin” 是可以隨意設置的。

不定寬塊狀元素

1. 加入 table 標簽

利用table標簽的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。

第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括、、 )。

第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。

html代碼：


<div>

 <table>

   <tbody>

     <tr><td>

     <ul>

         <li>我是第一行文本</li>

         <li>我是第二行文本</li>

         <li>我是第三行文本</li>

     </ul>

     </td></tr>

   </tbody>

 </table>

</div>

css代碼：


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

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

通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

代碼如下：


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

還有一種方法：


.container{

    position: absolute;
    top:50%;
    left:50%;

    margin:-170px -250px; /*container寬500px，高340px*/

}

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

java集合-補充HashMapJDK1.8

在Java 8 之前，HashMap和其他基於map的類都是通過鏈地址法解決衝突，它們使用單向鏈表來存儲相同索引值的元素。在最壞的情況下，這種方式會將HashMap的get方法的性能從O(1)降低到O(n)。為瞭解決在頻繁衝突時hashmap性能降低的問題，Java 8中使用平衡樹來替代鏈表存儲衝突 ...
java(2)之前往對象村

這次說一說面向對象與面向過程的區別以及面向對象的優點。聽一聽用面向過程思想編程的程式員寫程式時的心聲：What are the things this program has to do? What procedures do we need? 啊哈，作為一名合格的準java程式員的我的想法是：W ...
java多線程-線程池

線程池（Thread Pool）對於限制應用程式中同一時刻運行的線程數很有用。因為每啟動一個新線程都會有相應的性能開銷，每個線程都需要給棧分配一些記憶體等等。我們可以把併發執行的任務傳遞給一個線程池，來替代為每個併發執行的任務都啟動一個新的線程。只要池裡有空閑的線程，任務就會分配給一個線程執行。線上 ...
Netty構建分散式消息隊列實現原理淺析

在本人的上一篇博客文章：Netty構建分散式消息隊列（AvatarMQ）設計指南之架構篇中，重點向大家介紹了AvatarMQ主要構成模塊以及目前存在的優缺點。最後以一個生產者、消費者傳遞消息的例子，具體演示了AvatarMQ所具備的基本消息路由功能。而本文的寫作目的，是想從開發、設計的角度，簡單的 ...
（小議）面向對象

什麼是面向對象？如果讓我理解，只有一句話：它是一個與面向過程相對的概念。人們所設計的程式幾乎都是線性思維，即一步一步往下執行。對於一個沒有人機交互的程式來說，這是簡單易行的。然而，對於一個人機交互頻繁的程式來說，比如某個你所熟悉的游戲，這絕對是一個毀滅性的災難。未完待續。。。 ...
Atitit.異常處理嵌套冗長的解決方案

Atitit.異常處理嵌套冗長的解決方案 1. 異常處理的需要改進的地方1 2. +異常設計的初衷是, 在程式中出現錯誤時, 由程式自己處理錯誤, 儘量不要以exit(0)這種粗暴的方式中止程式. 1 3. 正常流程和異常流程的分離。2 4. “是藥三分毒”，任何事物有缺點，異常也是2 5. ...
Atitit.atiagent agent分銷系統代理系統設計文檔

Atitit.atiagent agent分銷系統代理系統設計文檔 1. 啟動項目1 2. 首也2 3. 登錄功能2 4. 用戶中心2 5. 充值查詢3 6. 授權下級代理4 7. 我的提成5 8. 查看下級玩家6 9. 查看下級代理7 10. 資料庫文檔 agent7 10.1. Acc 用戶 ...
新聞類網站rss介面的編寫心得

使用的是Jdom中的相關API,具體步驟如下要求的格式: 第一步:創建根標簽第二步:創建子標簽(帶有CDATA的) 第三步:使用io流將拼接好的xml輸出註意事項: 1,我使用的是springmvc作為表現層框架的 2,關於xml中的名稱空間問題<rss xmlns:content="http ...