php中文网7,3.23php中文网学习第7节课作业

实例

html>

0323作业

/*关于水平居中

1.父元素内为行内元素，多行行内元素，不定宽块元素的，都是通过设置父元素text-align:center属性实现子元素水平居中

2.不定宽的块元素需要先将子元素display属性值转为display:inline,然后在设置父元素text-align属性;*/

.box1 {

width:200px;

height: 200px;

text-align: center;

background-color:blue;

}

.box1 span {

line-height: 200px;

}

.box2 {

width:200px;

height: 200px;

/*设置水平居中*/

text-align: center;

background-color:brown;

/*转为单元格*/

display: table-cell;

/*设置垂直居中*/

vertical-align:middle;

}

.box3 {

width: 200px;

height: 200px;

background-color: red;

/*转为单元格*/

display: table-cell;

/*设置垂直居中*/

vertical-align: middle;

}

.box3 .text {

background-color: yellow;

width:100px;

/*通过设置margin：auto来实现水平居中*/

margin:auto;

}

.box4 {

width: 200px;

height: 200px;

background-color: green;

/*设置水平居中*/

text-align: center;

display: table-cell;

/*vertical-align:bottom; */

}

.box4 ul {

margin: 0;

padding: 0;

line-height: 200px;

}

.box4 li {

list-style: none;

display: inline;

}

一行行内元素

---

我里面有多行行内元素，不信你自己看。

---

我是一个块元素

---

• 1
• 2
• 3
• 4
• 5

运行实例 »

点击 "运行实例" 按钮查看在线实例