css如何設置文本居中對齊方式

今天就跟大家聊聊有關css如何設置文本居中對齊方式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)主營懷來網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),懷來h5重慶小程序開發(fā)搭建,懷來網(wǎng)站營銷推廣歡迎懷來等地區(qū)企業(yè)咨詢

方法：1、用“text-align:center”或“margin:0 auto”設置水平居中對齊；2、用“l(fā)ine-height:值”或“display:table-cell;vertical-align:middle”設置垂直居中對齊。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、水平居中：

(1).行內元素的水平居中？

如果被設置元素為文本、圖片等行內元素時，在父元素中設置text-align:center實現(xiàn)行內元素水平居中，將子元素的display設置為inline-block，使子元素變成行內元素

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2）塊狀元素的水平居中（定寬）

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

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

.child{
  width: 200px;
  margin: 0 auto;
}

(3)塊狀元素的水平居中（不定定寬）

在實際工作中我們會遇到需要為“不定寬度的塊級元素”設置居中，比如網(wǎng)頁上的分頁導航，因為分頁的數(shù)量是不確定的，所以我們不能通過設置寬度來限制它的彈性。

可以直接給不定寬的塊級元素設置text-align：center來實現(xiàn)，也可以給父元素加text-align:center 來實現(xiàn)居中效果。

當不定寬塊級元素的寬度不要占一行時，可以設置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>

.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;}

二、垂直居中：

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

場景1：子元素是行內元素，高度是由其內容撐開的

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

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

場景2：子元素是塊級元素但是子元素高度沒有設定，在這種情況下實際上是不知道子元素的高度的，無法通過計算得到padding或margin來調整，但是還是存在一些解法。

通過給父元素設定display:table-cell;vertical-align:middle來解決

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

結果

場景3：子元素是塊級元素且高度已經設定

計算子元素的margin-top或margin-bottom，計算方法為父(元素高度-子元素高度)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

結果

看完上述內容，你們對css如何設置文本居中對齊方式有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

標題名稱：css如何設置文本居中對齊方式
URL標題：http://muchs.cn/article32/ihihpc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、關鍵詞優(yōu)化、ChatGPT、靜態(tài)網(wǎng)站、虛擬主機、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)