如何设置div里面的字居中显示
1个回答
展开全部
先说文字居中。
此处是垂直居中,关键代码height:105px;line-height:105px;两个值要相等。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;' >居中</div>
文字横向居中,关键代码text-align:center
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>
图片居中,代码如下。
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'><img src="1.png" alt="" /></div>
效果如图;
可是垂直没居中。
图片垂直居中,关节代码display: table-cell; vertical-align:middle;
代码如下;
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; '><img src="1.png" alt="" /></div>
此处是垂直居中,关键代码height:105px;line-height:105px;两个值要相等。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;' >居中</div>
文字横向居中,关键代码text-align:center
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>
图片居中,代码如下。
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'><img src="1.png" alt="" /></div>
效果如图;
可是垂直没居中。
图片垂直居中,关节代码display: table-cell; vertical-align:middle;
代码如下;
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; '><img src="1.png" alt="" /></div>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询