您的位置:首页 > 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>
  • 总结
    以上就是这篇文章的全部内容了,希望对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

    您可能感兴趣