开发者社区> 问答> 正文

有关display:inline-block . 使用目标是图片和块的区别?

1.关于display:inline-block . 使用目标是图片和块的区别?
今天遇到一个问题,在不使用浮动的情况下,让块和块里的图片都并列排序,
正常情况下使用float :left;就可以使它们排序。inline-block也可以使用块正常排序。

问题是 当块里有img ,和div一起排列的时候为什么到顶点的高度就不相同?宽度有间隙我知道是父元素font-size:0

2.代码:`

    <p class="mainer">1</p>
    <p class="mainer">2</p>
    <img src="images/pic01.jpg" alt="图片1">
    <img src="images/pic01.jpg" alt="图片2">
    </div>`
        .mainer{
            width: 50px;
            height: 50px;
            background: #666;
            display: inline-block;
            
        }
        img{
            display: inline-block;
            width: 50px;
            height: 50px;
        }

screenshot
效果图:

的确是 块中的文字造成的块不对齐,如果里面没有文字,它会和图片并列。

展开
收起
杨冬芳 2016-06-12 11:45:48 2264 0
1 条回答
写回答
取消 提交回答
  • IT从业

    “html默认的情况是图片顶对齐而文字底对齐”,当文字和图片排列时会出现标准不统一的情况,所以你自己统一设置一种,比如“vertical-align:middle”就可以使文字和图片以垂直居中的方式对齐了。

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。

    设置各对象的vertical-align属性,属性说明:
    `
    baseline-将支持valign特性的对象的内容与基线对齐
    sub-垂直对齐文本的下标
    super-垂直对齐文本的上标
    top-将支持valign特性的对象的内容与对象顶端对齐
    text-top-将支持valign特性的对象的文本与对象顶端对齐
    middle-将支持valign特性的对象的内容与对象中部对齐
    bottom-将支持valign特性的对象的文本与对象底端对齐
    text-bottom-将支持valign特性的对象的文本与对象顶端对齐
    `
    在此设置为text-bottom即可实现图片与文字位于同一水平线上,好看多了
    如下:其他自己改

    复制代码
    代码如下:

    <span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span> 
    2019-07-17 19:33:38
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载