溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html網頁圖片和文字水平居中垂直居中顯示的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
div相對于頁面水平居中顯示：
核心代碼：margin：0 auto；
/意思為:div的外邊距上下為0px,左右居中顯示;/ /前提是position為相對定位;不能為absolute絕對定位/ **絕對定位：**是脫離文檔流，所以margin無效；它是一個虛體；任何元素都可以穿過它 **相對定位：**是偏移某個距離，且保持未定位簽的形狀，它原本所占的空間仍保留。margin有效；它是一個實體；
文字水平居中顯示(相對于簡單文本居中)：
核心代碼：text-align: center;
用法：
1、div中直接寫css代碼：text-align: center; 2、在div子級文本標簽中寫：text-align: center;
解釋：
/意思為:文本對齊方式為:中心;
前提是一個div包著,參照物為div/
文字垂直居中顯示：
核心代碼：line-height:30px;
用法：
div：height:30px; div中的文字：line-height: 30px;
解釋：
/意思為:離線高度為30px;/
/前提有兩個:
1 頁面本身有margin(外邊距)和padding(內邊距):所以,都要設置為0px; 2 與自己的父級(或div)高度要設置一致;/
文字水平居中顯示(相對于導航欄浮動的多個文本居中)：
適用：導航欄中浮動后文本為多個而且之間都有間距的方法；
用法：
div：width: 150px; div 中的文字： padding-left:22.5px; margin-left: 22.5px; font-size: 30px;
解釋：
div父級設置寬度； div中的子級設置它的內邊距和外邊距為父級寬度的四分之一； 前提字體設置寬度，父級寬度減去每個字體大小，再除以四分之一
圖片和文本垂直居中
設置css使文字和圖片同排同行時候上下垂直居中
img{ vertical-align:middle;}思維拓展：
text-align: center; 屬性規定元素中的文本的水平對齊方式。 設置塊級元素內文本的水平對齊方式 調整行內容中字母和字之間的間隔 text-align ：justify 實現兩端對齊文本效果。 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為相對定位;不能為absolute絕對定位*/
/*text-align: center;*/
}
.div_one p{
font-size: 20px;
text-align: center;
/*意思為:文本對齊方式為:中心;
前提是一個div包著,參照物為div*/
line-height: 100px;
/*意思為:離線高度為100px;*/
/*前提有兩個:
1 頁面本身有margin(外邊距)和padding(內邊距):所以,都要設置為0px;
2 與自己的父級(或div)高度要設置一致;*/
}
.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/潮流動圖4.jpg"/>
</div>
</body>
</html>關于“html網頁圖片和文字水平居中垂直居中顯示的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
