亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    css如何設(shè)置文字居中

    方法:1、使用text-align屬性設(shè)置文字水平居中,語法“text-align:center”;2、使用line-height屬性設(shè)置文字垂直居中,語法“l(fā)ine-height:數(shù)值”;3、使用CSS3的flex布局設(shè)置文字垂直居中。

    css如何設(shè)置文字居中

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

    1、使用text-align屬性來使文字水平居中

    text-align屬性規(guī)定元素中的文本的水平對齊方式,通過使用center值設(shè)置文本居中。

    text-align是一個基本的屬性,它會影響一個元素中的文本行互相間的對齊方式。值left、right和center會導(dǎo)致元素中的文本分別左對齊、右對齊和居中,想要使文本居中,直接使用center即可。

    該屬性設(shè)置文本和img標(biāo)簽等一些內(nèi)聯(lián)對象(或與之類似的元素)的居中。

    該屬性有如下幾個特點(diǎn):

    1)、text-align的center應(yīng)用在一個容器上,它只針對容器里面的文字以及容器里面的display為inline或者inline-block的容器,如果里面的容器display為block,則里面的容器的內(nèi)容不會居中。

    2)、text-align具有向下傳遞性,會不斷地向子元素傳遞。如果設(shè)置一個div,則其子div中的內(nèi)容也會居中。

    <!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title>css 水平居中</title> 		<style> 			.box { 				width: 400px; 				height: 100px; 				background: pink; 				text-align:center; 			} 		</style> 	</head> 	<body> 		<div class="box">css 水平居中了--文本文字</div> 	</body>  </html>

    效果圖:

    css如何設(shè)置文字居中

    css如何設(shè)置文字居中

    3、CSS3的flex布局 使文字垂直居中

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>css 垂直居中</title>         <style>             .box{                 width: 300px;                 height: 200px;                 background: #ccc;                  /*設(shè)置為伸縮容器*/                 display: -webkit-box;                 display: -moz-box;                 display: -ms-flexbox;                 display: -webkit-flex;                 display: flex;                 /*垂直居中*/                 -webkit-box-align: center;/*舊版本*/                 -moz-box-align: center;/*舊版本*/                 -ms-flex-align: center;/*混合版本*/                 -webkit-align-items: center;/*新版本*/                 align-items: center;/*新版本*/             }         </style>     </head>     <body>         <div class="box">css 垂直居中--文本文字(彈性布局)</div>     </body> </html>

    效果:

    css如何設(shè)置文字居中

    推薦學(xué)習(xí):css視頻教程

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號