居中小技巧

最新推荐文章于 2021-12-08 22:42:44 发布

watin_csdn

最新推荐文章于 2021-12-08 22:42:44 发布

阅读量170

点赞数

分类专栏： html/css web前端文章标签： html/csss

本文链接：https://blog.csdn.net/watin_csdn/article/details/80556390

版权

web前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html/css

1 篇文章 0 订阅

订阅专栏

1.当图片宽度大于父元素div宽度,而想要图片居中

其中图片不是背景，而是标签元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:400px;
            height:300px;
            border:3px solid red;
            margin: 0 auto;
            text-align: center;
        }
        div img{
            margin: 0 -100%;
        }
    </style>
</head>
<body>
<div>
    <!--
        当图片高度大于父元素div的高度时，不能使用margin:0 auto;或者text-align:center；
        那么，如何让图片居中：
        1.定位流，弊端：
            1》需要写三行代码：
            position：absolute;
            left:50%；
            margin-left:-图片宽度的一半；
            2》必须要知道图片的宽度
        2.奇淫效果：
        父元素设置:text-align: center;
        图片设置：text-align: center;
    -->
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731317524,2177573910&fm=27&gp=0.jpg" alt=""/>
</div>
</body>
</html>

2.display:table实现处置垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height:50px;
            border:1px solid red;
            text-align: center;
            display: table;

        }
        span{
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>
    <span>居中</span>
</div>
</body>
</html>

watin_csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中小技巧

1.当图片宽度大于父元素div宽度,而想要图片居中其中图片不是背景，而是标签元素&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫