DIV+CSS布局-水平居中布局方法(当元素内容宽度小于元素宽度时):

一、行内元素水平居中;

(一)文本节点元素水平居中:在其块状父元素上写如下样式:{text-align:center;};

(二)图像元素水平居中:在其块状父元素上写如下样式:{text-align:center;};

(三)背景图像水平居中方法:{background-position:center  top};

二、块级元素水平居中;

(四)div元素水平居中:

1.父元素写样式{text-align:center;}

2.自身元素写样式{display:inline-block;}

(五)div元素水平居中:在自身元素上写如下样式:{margin:0  auto;width:固定值;};

(六)div元素水平居中:

1.父元素写{position:relative;确定宽度}

2.自身元素写{position:absolute;left:50%;margin-left:负的自身宽度的1/2;}

(七)div元素水平居中:

1.父元素写{position:relative;确定宽度}

2.自身元素写{position:absolute;left:50%;transform: translateX(-50%);}

 

 

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注