慕数据6971917
2017-06-20 16:17
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
display:inline-block;
width:40px;/*在默认情况下宽度不起作用*/
height:40px;/*在默认情况下高度不起作用*/
background:none;/*设置背景颜色为粉色*/
text-align:center;/*设置文本居中显示*/
box-shadow:1px 2px 20px #666;
}
a:hover{
background:#666;
color:#FFF;
box-shadow:1px 1px 1px #000;
}
</style>
</head>
<body>
<center>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</center>
</body>
</html>
text-align:center;/*设置文本居中显示*/这句代码不起作用,是因为下面有<center></center>,将这个删除就ok,或者将css样式改成center{text-align:center;},都行
a{
display:inline-block;
width:40px;/*在默认情况下宽度不起作用*/
height:40px;/*在默认情况下高度不起作用*/
background:none;/*设置背景颜色为粉色*/
text-align:center;/*设置文本居中显示*/
box-shadow:1px 2px 20px #666;
line-height: 40px;
}
center{text-align:center;}
text-align:center;/*设置文本居中显示*/
这一句就是居中显示
如果要靠左的话 text-align:left;
初识HTML(5)+CSS(3)-升级版
1225810 学习 · 18234 问题
相似问题