您的位置：首页 > Web前端 > > 正文

css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）

更多 时间：2022-01-18 01:33:51 类别：Web前端 浏览量：2992

css文字图片垂直居中对齐

CSS设置文字图片垂直居中的方法总结

其实很简单，只需要在尾部增加一个<i></i> ，然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle;

看看效果图

css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）

实例代码

  • 复制代码
    • 代码如下:

  • <style>
    *{
    margin:0 ;
    padding:0;
    }
    .bg{
    background-color:#333;</p> <p> text-align:center;
    }
    .bg img{
    vertical-align:middle;</p> <p> }
    .test-list{
    background-color:#999;
    height:100px;
    }
    .test-list > span{ display:inline-block; width:210px; vertical-align:middle}
    .test-list > img{ display:inline-block; vertical-align:middle}
    .justify-fix{
    display:inline-block;
    width:250px;
    border-bottom:1px solod #F00}
    #p{
    text-align:center}
    #p span{
    display:inline-block; vertical-align:middle;</p> <p>}
    #p i{
    display:inline-block;
    height:100%;
    vertical-align:middle}
    </style>
    </head></p> <p><body>
    <p class="bg">

    display: block;
    <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" />
    </p>
    <li class="test-list">
    <span>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</span>
    <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" /></li>
    <p style="text-align:justify; background-color:#666; line-height:0">
    <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" /> <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" /> <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" /> <img src="<a href="http://static.mukewang.com/static/img/common/logo.jpg" alt="css文字图片垂直居中对齐（CSS设置文字图片垂直居中的方法总结）" border="0" /> <i class="justify-fix"></i>
    <i class="justify-fix"></i>
    <i class="justify-fix"></i>
    </p>
    <br/>
    <p style="background-color:#666; height:200px;" id="p">
    <span>第一行<br/>1313</span><i></i><span>第一行<br/>1313</span></p> <p></p>
    </body>

    • 总结
    以上就是这篇文章的全部内容了，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

    标签：居中 垂直 图片 文字 css
  • 上一篇：宝塔面板怎么修改安全的端口（宝塔面板如何设置伪静态规则？）
  • 下一篇：sql怎么写递归（sql server实现递归查询的方法示例）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利