css如何让图片和文字垂直居中对齐?

css如何让图片和文字垂直居中对齐?下面本篇文章给大家介绍一下css-文字和图片在容器内垂直居中的简单方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法一、使用line-heigh使多行文字居中或图片居中

把文字包裹在一个inline-block元素中vertical-align middle,外部元素line-heigh等于高度

<div class="box1">
    <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行
    居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中
    </span>
</div>
.box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
}
.box1 span{
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
}

图片居中:

<div class="box1">
       <img src="common-header-logo.png">
</div>
.box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
    text-align: center;
       font-size: 0;
}
.box1 img{
    vertical-align: middle;
}

效果:

1.png

2.jpg

方法二:使用flex布局实现居中(更简单,不支持IE9)

HTML如下:

<div class="box">
  <span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span>
  <p>p另一个段落元素</p>
</div>

CSS如下:

.box{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 50px auto;
    border: 2px solid #000;
    align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器,它本身将自适应填满除p元素外的宽度*/
    flex: 1;
    display: flex;
    justify-content: center;/*主轴居中*/
}

3.jpg

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css如何让图片和文字垂直居中对齐?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏