最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

div水平居中的最好方法(div左右居中)

JS/CSS 太平洋学习网 浏览 评论

 如何理解div水平居中呢?这样想象就好了,在一个长方形的div上,水平划一条直线,然后取水平线的中间点,这就是div水平居中了,div水平居中也叫div左右居中,如图所示。

QQ截图20171023195310.jpg

div水平居中的例子如下所示。

<div style="width: 150px;height: 80px;border: 1px solid red">
    <div style="width: 100px;height: 50px;border: 1px solid green;margin-left: calc((150px - 100px) / 2);">

    </div>
</div>

上面中div水平居中里面用到了“margin-left: calc((150px - 100px) / 2)”的这个css,意思是距离左边的距离,css calc()函数是计算函数,距离左边的距离。

计算公式是:(外框宽度-内框宽度)/2

这样就能使div水平居中了,简单吧!150px也可以使用100%宽度代替,效果如图。

QQ截图20171023200825.jpg

这种方法是最简单的。

分享到:
来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/1023/316.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论