设置span标签中内容居中:
span{display:block;margin:0 auto;width:500px;border:1px solid red;}
一、div和span中内容居中
复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
#te{
width: 100px;
height: 100px;
display:block;
background:yellow;
}
#tes{
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
line-height:90px;
font-size:20px;
}
div{
width:100px;
height:100px;
background:red;
text-align:center;
margin-left:center;
margin-right:center;
line-height:90px;
font-size:20px;
}
</style>
</head>
<body>
<span id="te">
<span id="tes">hello</span>
</span>
<div>welcome</div>
</body>
</html>
如图:
二、div与span垂直居中对齐
复制代码 代码示例:
<div>
<div style="height:50px; width:600px;"><img src="TraffTrain/train-icom.jpg" style="float:left;" />
<span style="font-weight:bold; font-size:16px; color:#0054AA; display:block; float:left; margin-left:10px; width:100px; height:50px; line-height:50px;">员工培训</span>
</div>
</div>