c在CSS中让两元素水平对齐怎么做-群英

上一篇：用CSS怎样画圆环，都有哪些实现方式下一篇：CSS中垂直居中处理的方法技巧有多少

这篇文章主要介绍了c在CSS中让两元素水平对齐怎么做相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇c在CSS中让两元素水平对齐怎么做文章都会有所收获，下面我们一起来看看吧。

css实现水平对齐，如图

有人会说css实现这种水平对齐要兼容ie8还不简单吗？使用float: left，或者display: inline-block，不就可以了吗？是的，最常用的最简单方式就是上面这两种，但还有一种方式也可以实现，那就是使用display: table-cell;

示例代码

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        width: 1000px;
        height: 1000px;
        margin: 100px;
        background-color: #f60;
    }
    .left{
       /*关键点在于将两个元素设置为display：table-cell*/
        display: table-cell;
        vertical-align: top;
        width: 20%;
        min-width: 200px;
        height: 400px;
        background-color: #ccc;
    }
    .right{
        display: table-cell;
        vertical-align: top;
        /*即使宽度设为2000px，元素的内容还是可以正常显示*/
        width: 2000px;
        height: 600px;
        background-color: #f10;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

这篇关于“c在CSS中让两元素水平对齐怎么做”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！