图片和文字对齐的方法

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

方法一、

设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐

在此设置为text-bottom即可实现图片与文字位于同一水平线上

<div>
<div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<img src="b-grade.png"></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:top"><img src="b-grade.png"></span></div>
</div>

但是有时候如果有line-height的话会不管用，改用方法二

方法二、通常图片与文字放在一起的时候图片往往会偏上，通过设置margin-bottom可以达到文字图片底边对齐的目的

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

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

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

或者在样式里面设置

img {
margin-bottom:-3px;
}

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

方法三、

li{
margin: 0px;
padding: 20px 3px 3px 8px;
background: url(images/sohu_06.jpg) no-repeat 0 50%;
list-style-type: none;
list-style-position: inside;
}

图片和文字对齐的方法相关推荐

关于图标和文字对齐的方法整理。
关于图标和文字对齐的方法整理. 标签的图标修饰很常见.但是通常都会遇到小图标和文字对齐的若干问题.尤其是图标和文字字号不一致的时候,怎么对齐都觉得不自然. 当然我今天不讨论自不自然的问题. 网上关于这 ...
CSS 之控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
python图片转文字easyocr_OCR识别软件将图片转文字的具体方法
OCR识别软件将图片转文字的具体方法 OCR识别软件是一款我们经常需要使用的办公软件,如果想要将图片转换成文字,那么就需要使用这款软件进行转换,那么如何将使用OCR识别软件将首先在这里大家可以使用捷 ...
如何提取图片中文字？安利这几个图片转文字提取的方法
在我们工作学习中,有没有遇到过需要将图片中的文字信息给记录下来的情况,一般这种时候你是怎么做的呢?是根据图片手动输入吗?如果是在文字少量的情况下,可以这样操作,可是如果文字较多的话,手动输入难免会降低 ...
html里，实现图片与文字对齐的最简洁方法
一个align完全搞定,这是html语言里最合适的实现方法. <p>图像 <img src="/i/eg_cute.gif" align="bottom ...
图标和文字对齐的方法
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种对img设置竖直方向对齐为middle, 1 2 3 4 5 6 <div> ...
DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
图片与文字垂直居中的方法
块级元素,行内块元素及行内元素的特点 1.块级元素块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 常用的块级元素有:<div& ...

图片和文字对齐的方法

图片和文字对齐的方法相关推荐

最新文章

热门文章