溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html網(wǎng)頁(yè)圖片和文字水平居中垂直居中顯示的示例分析

發(fā)布時(shí)間：2021-09-18 13:53:03 來(lái)源：億速云 閱讀：265 作者：小新 欄目：編程語(yǔ)言

這篇文章將為大家詳細(xì)講解有關(guān)html網(wǎng)頁(yè)圖片和文字水平居中垂直居中顯示的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

div相對(duì)于頁(yè)面水平居中顯示：

核心代碼：margin：0 auto；

/意思為:div的外邊距上下為0px,左右居中顯示;/
/前提是position為相對(duì)定位;不能為absolute絕對(duì)定位/
**絕對(duì)定位：**是脫離文檔流，所以margin無(wú)效；它是一個(gè)虛體；任何元素都可以穿過(guò)它
**相對(duì)定位：**是偏移某個(gè)距離，且保持未定位簽的形狀，它原本所占的空間仍保留。margin有效；它是一個(gè)實(shí)體；

文字水平居中顯示(相對(duì)于簡(jiǎn)單文本居中)：

核心代碼：text-align: center;

用法：

1、div中直接寫css代碼：text-align: center;
2、在div子級(jí)文本標(biāo)簽中寫：text-align: center;

解釋：

/意思為:文本對(duì)齊方式為:中心;

前提是一個(gè)div包著,參照物為div/

文字垂直居中顯示：

核心代碼：line-height:30px;

用法：

div：height:30px;
div中的文字：line-height: 30px;

解釋：

/意思為:離線高度為30px;/

/前提有兩個(gè):

1 頁(yè)面本身有margin(外邊距)和padding(內(nèi)邊距):所以,都要設(shè)置為0px;
2 與自己的父級(jí)(或div)高度要設(shè)置一致;/

文字水平居中顯示(相對(duì)于導(dǎo)航欄浮動(dòng)的多個(gè)文本居中)：

適用：導(dǎo)航欄中浮動(dòng)后文本為多個(gè)而且之間都有間距的方法；

用法：

div：width: 150px;
div 中的文字：
padding-left:22.5px;
margin-left: 22.5px;
font-size: 30px;

解釋：

div父級(jí)設(shè)置寬度；
div中的子級(jí)設(shè)置它的內(nèi)邊距和外邊距為父級(jí)寬度的四分之一；
前提字體設(shè)置寬度，父級(jí)寬度減去每個(gè)字體大小，再除以四分之一

圖片和文本垂直居中

設(shè)置css使文字和圖片同排同行時(shí)候上下垂直居中
img{ vertical-align:middle;}

思維拓展：

text-align: center;
屬性規(guī)定元素中的文本的水平對(duì)齊方式。
設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式
調(diào)整行內(nèi)容中字母和字之間的間隔
text-align ：justify
實(shí)現(xiàn)兩端對(duì)齊文本效果。
align-items: center; /垂直居中/
justify-content: center; /水平居中/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cssdiv、文字、圖片居中</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.div_one{
 position: relative;
     border:1px solid red;
     width:1000px;
     height:100px;
     margin:0 auto;
     /*意思為:div的外邊距上下為0px,左右居中顯示;*/
    /*前提是position為相對(duì)定位;不能為absolute絕對(duì)定位*/
    
    /*text-align: center;*/
}
.div_one p{
font-size: 20px;
text-align: center;
/*意思為:文本對(duì)齊方式為:中心;
前提是一個(gè)div包著,參照物為div*/
line-height: 100px;
/*意思為:離線高度為100px;*/
/*前提有兩個(gè):
1 頁(yè)面本身有margin(外邊距)和padding(內(nèi)邊距):所以,都要設(shè)置為0px;
2 與自己的父級(jí)(或div)高度要設(shè)置一致;*/
}
.div_two{
top: 100px;
position: relative;
     border:1px solid green;
     width:1000px;
     height:300px;
     margin:0 auto;
     
     text-align: center;
}
.div_two img{
width:300px;
height: 200px;
/*align-content: center;
align-items: center;*/
/*justify-content: center;*/
transform:translateY(25%);
/*vertical-align:200%;*/
/*line-height: 300px;*/
/*margin-left: 175px;
padding-left: 175px;*/
} 
</style>
</head>
<body>
<div class = "div_one">
    <p>div居中和字體居中和字體垂直居中</p>
</div>
<div class = "div_two">
    <img src="img/潮流動(dòng)圖4.jpg"/>
</div>
</body>
</html>

關(guān)于“html網(wǎng)頁(yè)圖片和文字水平居中垂直居中顯示的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手