css实现元素居中

时间:2023-12-11 22:06:14

 参见详细教程,该教程涵盖了所有居中的情况:

https://css-tricks.com/centering-css-complete-guide/

css元素居中

1.水平居中

1)文本,图片等行内元素的水平居中

给父块状元素添加text-align:center属性。

2)确定宽度的块级元素的水平居中(注意一定是块内元素)

通过设置margin-left:auto以及margin-right:auto来实现

3)不确定宽度的的块状元素的水平居中

(1)将该不确定宽度的块状元素改为display:inline;为其外围的块状父元素设置text-align:center

(2)设置父元素position:relative,left:50%;子元素设置为position:relative和left:-50%。

2,垂直居中

1)父元素高度不确定的单文本,图片,块级元素的垂直居中

通过为父元素设置相同的上下padding来实现

2)父元素高度确定的单行文本的垂直居中

为父元素设置line-height,该line-height的高度等于父元素的确定高度

3)父元素高度确定的多行文本、图片、块状元素的垂直居中

关于垂直居中,css中有一个属性vertical-align;但是只有父元素是td或者th时,该元素才有效,对于其他块状元素p,div等,默认情况下不支持该属性;此时(1)设置父元素dispaly:table-cell,不过该属性不同浏览器的支持不同。(2)将内容就放置在一个一行一列的table里面,td标签默认就设置了vertical-align:middle.

关于垂直和水平居中的各种情况,可以参照慕课网

4)要是的icon和文字居中,需要为icon添加:verticle-align:middle

相关文章