css的一些属性
1 文字的水平居中
<style type="text/css">
div
{
display:inline-block;
width:500px;
height:50px;
line-height:50px;
text-align:center; /*实现div元素内文字水平居中*/
border:1px dashed gray;
}
</style>
</head>
<body>
<div>CSS实现单行文字水平居中：text-align:center;</div>
2 块元素居中：
保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；
<style type="text/css">
div
{
margin:0 auto;
width:80%;
height:100px;
border:1px solid gray;
}
</style>
</head>
3 行内元素：
使用text-align:center剧中；
<style type="text/css">
div{text-align:center;}
</style>
</head>
<body>
<div><strong>strong元素</strong></div>
<div><span>span元素</span></div>
<div><a href="#">a元素</a></div>
4 INLINE-BLOCK元素的居中，比如图片
<style type="text/css">
body{text-align:center;}
div
{
display:inline-block;
width:100px;
height:100px;
border:1px solid gray;
}
</style>5 垂直居中
1) 单行文字垂直居中：
定义line-height和height属性值相等就可以
<style type="text/css">
div
{
height:100px;
line-height:100px;
border:1px solid gray;
}
</style>
2） 多行文字
如果父元素高度固定，文字可能是两行或者多行，则
<style type="text/css">
p
{
display:table-cell;
vertical-align:middle;
width:400px;
height:120px;
border:1px dashed gray;
}
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>飒飒奥奥撒撒撒撒所<br />
顶顶顶顶顶顶顶顶顶顶等等<br />
啊啊啊啊啊啊啊啊啊啊啊啊</span>
</p> 相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18