275147378abc

1.先说文字居中。

此处是垂直居中,关键代码height:105px;line-height:105px;两个值要相等。

<div style=\' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;\' >居中</div>

2.文字横向居中,关键代码text-align:center

<div style=\' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center\'>ju zhong</div>

3.图片居中,代码如下。

<div style=\' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center\'><img src="1.png" alt="" /></div>

4.图片垂直居中,关节代码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>

分类:

技术点:

相关文章: