div与span标签居中怎么设置?

发布时间:2020-11-11编辑:脚本学堂
有关div与span标签居中的设置方法,包括div和span中内容居中、div与span垂直居中对齐的二个例子,通过实例学习span居中设置方法。

设置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与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>