图片与文字的对齐和元素的垂直水平居中

注：无论是display:table方式还是display:inline-block方式，想要实现子元素水平或垂直或水平垂直都居中，一定不要忘记给父元素设置font-size:0消除默认间隙，不然会有误差。

1.图片或背景图与文字的对齐

　　给图片和文字的父容器设置font-size:0,然后单独给文字设置字体大小，因为inline-block元素会产生水平和垂直方向的默认间隙，可以通过给父容器设置font-size:0消除默认间隙，然后将图片容器设置为inline-block元素，如果是插入图片img本身就是inline-block元素就不用设了，然后设置图片容器的垂直对齐方式为vertical-align: top。

<style>
* {
    margin: 0;
    padding: 0;
}
//方法一,inline-block
.title {
    font-size: 0;
    margin: 10px;
}
.brand {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 18px;
    background: url("images/brand@2x.png") no-repeat;
    background-size: cover;
}
.name {
    margin-left: 6px;
    font-size: 16px;
    line-height: 18px;
}
.title2 {
    font-size: 0;
    margin: 10px;
}
.brand2 {
    vertical-align: top;
    width: 30px;
    height: 18px;
}
.name2 {
    margin-left: 6px;
    font-size: 16px;
    line-height: 18px;
}
//方法二，浮动
.title3 {
    overflow: hidden;
    margin: 10px;
}
.brand3 {
    float: left;
    width: 30px;
    height: 18px;
}
.name3 {
    float: left;
    margin-left: 6px;
    font-size: 16px;
    line-height: 18px;
}  
</style>
<body>    
<div class="title">
    <span class="brand"></span>
    <span class="name">粥品香坊</span>
</div>
<div class="title2">
    <img class="brand2" src="images/brand@2x.png" alt="品牌">
    <span class="name2">粥品香坊</span>
</div>
<div class="title3">
    <img class="brand3" src="images/brand@2x.png" alt="品牌">
    <span class="name3">粥品香坊</span>
</div> 
</body>

2.元素水平垂直均居中（宽高已知）

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #666;
    }
    .child {
        position: relative;
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        background: #f0f;
    }
</style>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

3.元素水平垂直均居中（宽高未知，图片）

　　父容器设置text-align: center,line-height:容器高,font-size:0;img标签设置vertical-align: middle.注意这种情况是img标签外直接就是最外层的父容器，没有间接包裹一层，下面一种情况是img标签和父容器中间还有一层，这种要用display: table来实现了，而且千万不能忘了父容器要设置font-size:0，不然会有间隙误差，下面一种table方式也是如此。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .parent {
        text-align: center;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid #666;
        font-size: 0;
    }
    img {
        vertical-align: middle;
    }
</style>
<body>
    <div class="parent">
        <img src="images/brand@2x.png" alt="品牌">
    </div>
</body>

4.元素水平垂直居中（宽高未知，通用，diaplay:table）

　　父元素设置display:table,text-align:center,font-size:0;子元素设置display:table-cell,vertical-align:middle,这种方式也可以实现多行文本垂直居中。该方式IE低版本无效，IE低版本下父元素设置line-height属性，子元素设置display:inline-block即可。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        display: table;
        text-align: center;
        width: 100px;
        height: 100px;
        border: 1px solid #666;
        font-size: 0;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<body>
    <div class="parent">
        <div class="child">
            <img src="images/brand@2x.png" alt="品牌">
        </div>
    </div>
</body>

5.元素水平垂直居中（宽高未知，css3）

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .parent {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #666;
        margin: 20px;
        font-size: 0;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);        
        transform: translate(-50%, -50%);
    }
</style>
<body>
    <div class="parent">
        <div class="child">
            <img src="images/brand@2x.png" alt="">
        </div>
    </div>
</body>

posted on 2018-07-04 16:07 Onlycare 阅读(290) 评论(0) 收藏举报