父元素为自适应图片,子元素为文字,CSS如何设置在父元素内上下左右居中?

xiangyangsen
  • 5
新手上路,请多包涵

父元素为自适应图片,子元素为文字,如何设置在父元素内上下左右居中?

图片描述

最后用table完美解决了 兼容性到IE6 哈哈 贴上代码

额 这里编辑怎么显示代码 输入贴上代码自动转译了

<h1>居中</h1>
评论
阅读 2k
2 个回答
✓ 已被采纳

第一种:子元素line-height高度为父元素高度
第二种:父元素display:table和子元素table-cell
第三种:子元素绝对定位 然后margin:auto
第四种:flex
第五种:父元素设置 display: -webkit-box; -webkit-box-pack: center; box-pack: center; -webkit-box-align: center; box-align: center;
第六种:inline-block vertical-align middle

拿去玩,说爱我

<html>
<head>
    <style>
        ul,li{
            display: block;
            width:20rem;
            height:10rem;
            list-style:none;
            padding:0;
            margin:0;
            text-indent: 0;
        }
        ul{
            width:100%;
        }
        li{
            padding:1rem;
            float:left;
        }
        a{
            display: block;
            position: relative;
            text-decoration:none;
        }
        a img{
            border:0;
            display: block;
            width:100%;
            height:100%;
        }
        a span{
            font-size:1rem;
            color:white;
            display: block;
            height:10rem;
            overflow: hidden;
            position: absolute;
            top:0;
            left:0;
            width:100%;
        }
        span.left{
            text-align: left;
        }
        span.center{
            text-align:center;
        }
        span.right{
            text-align:right;
        }
        span.top{
            line-height:1rem;
        }
        span.middle{
            line-height:10rem;
        }
        span.bottom{
            line-height:18rem;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTH4dKJwvNJE3nwwStezaK5dyhLolRU1vfX5HVumiFBBwVqZfZ9We4ZqnyR" alt="">
                <span class="bottom center">This is Paris</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbS3oRIl7VuAd_hVTTcaIG1stAXQEs_VMnx_2WkG-Gg5LR7ZeXeg" alt="">
                <span class="top left">This is Paris</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://static.travel.usnews.com/images/destinations/86/paris_edited_445x280.jpg" alt="">
                <span class="middle right">This is Paris</span>
            </a>
        </li>
    </ul>
</body>
</html>
宣传栏