|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 垂直居中是布局在前端布局中是非常常見的的居中方法,接下來的這篇文章就給大家來介紹一下div文字垂直居中的實現方法,有需要的朋友可以參考一下。首先我們應該知道文字的水平居中比較簡單,行級元素設置其父元素的text-align center,塊級元素設置其本身的left 和 right margins為auto即可。但是div文字的垂直居中就不是那么簡單了,所以我們就來具體看看div文字垂直居中的幾種實現方法。 1、vertical-align屬性讓文字居中 vertical-align值有很多,常用的就是middle,bottom,text-bottom等,然而真實使用的時候,我們會發現這個屬性“時靈時不靈”,有些情況下我們加了這個屬性之后仍然不見img或者text有任何的變化。那是因為vertical-align只作用在inline-block或者inline,還有table-cell等元素內。 示例: <div style="vertical-align: middle;display: table-cell;">
<img src="02.jpg" alt="">
<p>文本居中</p></div>2、利用行高(line-height)讓文字垂直居中 如果要垂直居中的只有一行或幾個文字,那它的制作最為簡單,只要讓文字的行高和容器的高度相同即可。 示例: p { height:30px; line-height:30px; width:100px; overflow:hidden; }3、利用內邊距(padding)讓文字垂直居中 使用內邊距讓文字垂直居中和利用行高讓文字垂直居中差不多,同樣適合一行或幾行文字垂直居中。 示例: p { padding:20px 0; }4、利用CSS3的transform來實現文字垂直居中 示例: .center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}5、利用flex布局實現文字垂直居中 示例: .flex{ /*flex 布局*/
display: flex; /*實現垂直居中*/
align-items: center; /*實現水平居中*/
justify-content: center;
text-align: justify;
width:200px;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}本篇文章到這里就全部結束了,想進一步了解上述代碼所用到的各種屬性可以參考php中文網的css使用手冊和css3學習手冊!!! 以上就是div文字垂直居中的方法有哪些?div文字垂直居中顯示的方法介紹的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!