`

用css实现图片与文字底边对齐

阅读更多
通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点)

解决问题最好的办法:.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的

<img src="bottom.gif" style="margin-bottom:-3px">

或者在样式里面设置

img {
margin-bottom:-3px;
}

这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

---------------

转者按:测试无效。

PS:再测试有用,去除了原来的vertical-align: middle;代码

本文来自:http://hi.baidu.com/kouke22/blog/item/c1ef562c5a271ae98b13995e.html
分享到:
评论

相关推荐

    CSS试题教学内容.docx

    border-bottom是一个CSS属性,它用来设置元素的底边框。 23. 关于CLASS和ID的错误说法是CLASS和ID可以同时使用在同一个元素上。 CLASS和ID是CSS选择器中两种不同的选择器,它们不能同时使用在同一个元素上。

    计算机等级考试网页复习题

    此外,所有单元格的属性也需要设置为水平居中和相对底边对齐,这同样通过CSS实现,例如`text-align: center;`和`vertical-align: bottom;`。 接下来,我们要进行一系列的单元格操作。例如,合并第1列的第1和2行,...

    入门教程 CSS属性.pdf

    ### CSS基础语法与属性详解 #### 一、CSS背景属性 **1.1 背景属性概述** 在网页设计中,背景属性是用于控制页面元素背景的重要工具。通过合理运用这些属性,开发者能够创造出丰富多彩的视觉效果。下面将详细介绍...

    css教程(20211001031356).pdf

    此外,我们还提到了文字对齐方式(text-align)和垂直对齐方式(vertical-align)。文本对齐属性用于设置文本在块级元素中的水平对齐,可以设置为left、right、center或justify。垂直对齐则用于调整元素内部内容的...

    div+css公共属性

    在网页设计中,`div+css`是一种常见的布局方式,它通过HTML的`&lt;div&gt;`元素结合CSS(层叠样式表)来实现页面结构与样式的分离。以下是一些`div+css`共用的属性及其详细解释: 1. `font-size`: 这个属性用于设置字体...

    用CSS属性transparent实现各种三角形示例代码

    通过上述技巧,我们能够仅使用CSS的边框属性来制作各种形状的三角形,无需添加额外的图片或者图形元素,从而保持页面的轻量级,并利用CSS的特性达到良好的视觉效果和性能表现。通过阅读和理解本文内容,相信读者可以...

    swift-SwiftBox-Swift中的Flexbox使用Facebook的css-layout

    container.alignItems = .flexEnd // 侧轴底边对齐 ``` 通过这种方式,SwiftBox为Swift开发者提供了一种强大的工具,能够轻松实现复杂的响应式布局,提高应用的用户体验。在实际项目中,结合SwiftBox和AutoLayout,...

    css-hexagon:一个更少的脚本来生成具有自定义大小和颜色CSS六边形

    基本原理是利用两个相交的等腰三角形,它们的底边对齐,形成一个六边形。每个三角形由一个元素的`::before`和`::after`伪元素来实现,通过设置边框宽度和颜色,可以定制六边形的大小和颜色。 在`css-hexagon`中,你...

    css画正六边形的两种方法

    本文将详细介绍两种使用CSS实现正六边形的方法。 方法一基于使用伪元素`::before`和`::after`来创建两个三角形,这些三角形与主元素组合成一个完整的正六边形。首先,我们需要理解正六边形的基本几何特性。正六边形...

    html-css-digitalocean-flexbox

    4. `align-items`:定义在交叉轴上的对齐方式,类似地有居中、底边对齐等。 5. `flex-wrap`:决定子元素是否换行。 6. `flex-grow`、`flex-shrink` 和 `flex-basis`:这三个属性一起决定了子元素的伸缩性。 **...

    div+css样式自制带小三角的tooltips效果

    为了使小三角的底边与容器的边缘对齐,使用了两个重叠的div元素(.arrow-border 和 .arrow-bg),这两个元素分别设置了不同的底部外边距,通过调整bottom属性值的差值(在示例中为1px),使得两个三角形形成了一个...

    WEB前端开发必备之浏览器兼容性处理方法大全[借鉴].pdf

    浏览器兼容性处理方法大全 浏览器兼容性是WEB前端开发中非常重要的一个方面,因为不同的浏览器对HTML、CSS和JavaScript的解析和执行方式不同,会导致同一个页面在不同的...宽度就是它的文字或图片的宽度,不可改变。

    让div+css兼容所有浏览器的一些注意事项

    和line-height属性值与div的高度一致,可以实现垂直居中。但这种方法的缺点是要求内容不换行。 7. cursor:pointer样式在IE和Firefox中均可以显示为指针形状,而cursor:hand仅在IE中有效。在跨浏览器兼容性中需要...

    7-layout-flex-box

    /* 使元素底边对齐 */ } ``` - `align-self`允许单独的Flex项覆盖容器的`align-items`设置。 6. **换行与堆叠(Wrapping)**:使用`flex-wrap`属性控制Flex项是否换行。默认是`nowrap`,可以设置为`wrap`或`...

    react-native-style-cheat-sheet:大多数React Native样式材料在一页中

    `justifyContent`和`alignItems`分别处理主轴和交叉轴上的对齐方式,例如,`justifyContent: 'center'`会使子元素在主轴上居中,`alignItems: 'flex-end'`则会将子元素在交叉轴上对齐到容器的底边。`alignSelf`允许...

Global site tag (gtag.js) - Google Analytics