、

...

、

、

、

、、

、

、

同样的你也可以通过以下代码把块级元素变为行内元素：

display: inline;

 

3.内联块状元素简介



BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

180

查看详情

内联块状元素，和行内元素相似，都在可以显示在一行上。注：元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素有这些：、

display: inline-block;

 

二、居中方法

a.使用左右外边距自适应方法：margin: 0 auto; 　　 /*使用此方法需要变为内联块状元素*，且需要固定宽度*/

 

b.同样使用左右外边距方法：

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px;        /*250px是元素的宽度除以2得到，且需要进行定位*/

 

c.父元素设置text-align: center;  /*使用此方法需要变为行内元素*/

 

d.对于宽度不确定的元素，可以在外层套上一个table标签，然后给table使用margin: 0 auto;来居中：

table{

　　margin: 0 auto;

}

HTML代码：

   

       

           

       

 

   

我想水平居中！

 

e.对于宽度不确定的元素，给它和父元素进行定位，分别设置left: -50%和left: 50%，然后实现水平居中：

.father{
　　position:relative;
　　left:50%;
　　width: 960px;
　　height: 300px;
　　background: yellow;
}
.children{
　　height: 30px;
　　background:#ccc;
　　position:relative;
　　left:-50%;
}

HTML代码：


　　

aaaaaaaa