`

同一行图片和文字垂直居中以及图片和文字间隙问题

 
阅读更多
1、垂直居中:
     如果一个div中含有图片和文字,并且文字和图片在同一行,这个时候会发现图片和文字都基于容器底部对齐,导致文字和图片不能垂直居中,解决办法有两种:
    a、给img添加属性: img{vertical-align:middle}
    b、将img和文字都float:left,并给div添加属性:div{line-height:37px},这里的高度应该是跟img的高度相同。

2、以上的情况是图片和文字在同一行,此时图片和文字之间是没有间隙的,如果他们之间有换行,即文字和图片不在同一行,你会发现图片和文字之间是有间隙,解决方法:
   a、将img和文字都float即可。

3、综合以上两种情况,如果你既要让图片和文字垂直居中,又要消除图片和文字之间的间隙,那么你可以这样做:
   将img和文字都float,并且给父级元素设置line-height,并且这个line-height的值为图片的高度。
分享到:
评论

相关推荐

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    此外,理解`block`和`inline`元素的区别也是关键,前者总是开始于新的一行,而后者则在同一行内与其他元素共存。 ### 4. IE与宽度和高度的问题 IE浏览器对`min-width`和`min-height`的支持有限,通常将其视为普通...

    福师网页艺术设计作业一.docx编程资料

    - **问题**: 如何设置表格中一行中的文字垂直居中对齐? - **答案**: 使用`<tr valign="middle">`可以实现表格中一行的文字垂直居中对齐。 - **解释**: `valign`属性用于设置垂直对齐方式,“middle”表示居中对齐。...

    CSS兼容性大全.pdf

    1. **垂直居中问题**: 在CSS中实现元素的垂直居中可以使用`vertical-align: middle;`配合`line-height`。但这种方法要求内容在同一行内,如果内容换行则无法保持居中。一种解决方法是设置`line-height`等于容器的...

    CSS中火狐浏览器与IE浏览器的兼容

    解决垂直居中问题 对于需要垂直居中的元素,可以通过设置 `vertical-align: middle` 来尝试解决,但需要注意的是,这种方式在IE和Firefox中的表现可能略有不同。一种常用的解决方法是: ```css #element { ...

    DIVCSS各网页兼容技巧大全.pdf

    2. **垂直居中**:要实现一个`div`内容的垂直居中,可以使用`line-height`属性,将其设置为与`div`相同的高度。例如,`line-height: 200px;`。但这种方法仅适用于单行文本,且需避免文本换行。 3. **浮动元素的...

    DR检查规范.pdf

    《DR检查规范》是医学影像诊断中的重要标准,主要涉及X线检查的多个关节部位,如肘关节、肩关节、踝关节、跟骨、膝关节、髋关节以及颈椎的前后位和侧位拍摄。这些规范确保了影像的质量,有助于医生准确诊断疾病。 1...

    DIV+CSS教程——第三天二列和三列布局借鉴.pdf

    【标题】和【描述】提及的是一个关于使用`DIV+CSS`进行网页布局的教程,主要涵盖二列和三列布局的学习。以下是相关知识点的详细解释: 1. **二列自适应宽度**: - 在这种布局中,通常左侧列(如`side`)的宽度是...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    `和`line-height`来实现元素的垂直居中,但需注意不要让内容换行。 - **margin加倍**:在浮动元素(`float: left`或`right`)上设置的`margin`在IE6中可能会加倍,可以通过添加`display: inline;`来修复。 - **...

    CSS inline-block属性概述及其使用示例

    理解`inline-block`的关键在于其结合了两者的优势:行内元素的水平布局以及块级元素的尺寸和内边距控制。 块级元素(block elements)通常是占据一整行,有自己的高度、宽度、内边距和外边距,它们按照从上到下的...

    尚硅谷_前端_面试题

    13. **如何居中div?** - 有两种常见方法: - 使用`margin: auto`配合固定宽度:`div { width: 200px; margin: auto; }` - 使用Flexbox:`div { display: flex; justify-content: center; align-items: center; }...

Global site tag (gtag.js) - Google Analytics