html網頁圖片和文字水平居中垂直居中顯示的示例分析

這篇文章將為大家詳細講解有關html網頁圖片和文字水平居中垂直居中顯示的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在魚臺等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網站建設、做網站網站設計制作按需定制,公司網站建設,企業(yè)網站建設,品牌網站制作,全網整合營銷推廣,成都外貿網站建設公司,魚臺網站建設費用合理。

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;
屬性規(guī)定元素中的文本的水平對齊方式。
設置塊級元素內文本的水平對齊方式
調整行內容中字母和字之間的間隔
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網頁圖片和文字水平居中垂直居中顯示的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：html網頁圖片和文字水平居中垂直居中顯示的示例分析
本文來源：http://www.jbt999.com/article30/gsedso.html

成都網站建設公司_創(chuàng)新互聯，為您提供網頁設計公司、電子商務、網站策劃、關鍵詞優(yōu)化、品牌網站設計、虛擬主機

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

猜你還喜歡下面的內容