CSS设置图片的对齐
CSS设置图片的对齐
横向对齐方式
图片的水平对齐方式和文字的水平对齐方式基本相同，分别是左、中、右三种方式，不同的是，图片的水平对齐通常不能直接通过设置图片的text-align属性设置，而是，通过设置其父元素的该属性来实现的。
<span style="font-size:24px;"><html><head><title>水平对齐</title></head><body><table width="100%" border="1"><tr><td style="text-align:left;"><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0""></td></tr><tr><td style="text-align:center;"><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0""></td></tr><tr><td style="text-align:right;"><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0""></td></tr></body>
</html></span>代码如上，可以看到三种图片分别在表格中以左、中、右的方式对齐，如果，直接在图片上面设置水平对齐方式，则达不到想要的效果。
纵向对齐方式
图片竖直方向上的对齐方式，主要体现在与文字搭配的情况下，尤其当图片的高度和文字本身不一致时，在CSS中同样通过vertical-align属性来实现。
属性vertical-align的值有很多，注意，某些属性值在IE和Firefox中显示时是略有区别的。
<span style="font-size:24px;"><html><head><title>竖直对齐</title><style type="text/css"><!--p{font-size:15px;}img{border:1px solid #000055;}--></style></head><body><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:baseline;">方式：baseline<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:baseline;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:bottom;">方式：bottom<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:bottom;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:middle;">方式：middle<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:middle;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:sub;">方式：sub<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:sub;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:super;">方式：super<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:super;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-bottom;">方式：text-bottom<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-bottom;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-top;">方式：text-top<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:text-top;">方式</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:top;">方式：top<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:top;">方式</p></body>
</html></span>代码如上，当vertical-align属性的值为Baseline时，两幅图片的下端都落在文字的基线上，如果给文字添加了下划线，那就是下划线的位置，对于其他的值，都能从显示结果和值本身的名称直观的看到结果。
当vertical-align的值为bottom或者sub时，可以看出IE和Firefox中显示的结果不一样，因此，这样的属性值不建议使用和文字的竖直对齐方式一样，图片的竖直对齐方式也可以用具体的数值来调整，正数和负数都可以使用。
<span style="font-size:24px;"><html><head><title>竖直对齐，具体数值</title><style type=""text/css><!--p{font-size:15px;}img{border:1px solid #000055;}--></style></head><body><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:5px;">方式：5px</p><p>竖直对齐<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" style="vertical-align:-10px;">方式：-10px</p></body>
</html></span>代码如上，类比文字的竖直对齐方式，图片的竖直对齐方式的效果基本相同，而且，无论图片本身的高度是多少。
CSS设置图片的对齐相关推荐
- html 设置图片左对齐,CSS设置图片的对齐
CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...
- html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法 发布时间:2021-01-05 09:32:24 来源:亿速云 阅读:116 作者:小新 这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...
- CSS设置图片的重复
CSS设置图片的重复 CSS通过设置background-repeat属性来设置图片的重复方式,包括水平重复.竖直重复和不重复等. 图片的竖直方向重复. <span style="fo ...
- html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距 希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
- CSS设置图片的位置
CSS设置图片的位置 CSS通过background-position属性来调整背景图片的位置. 比如,当希望背景图片显示在页面的右下角时,可以设置属性值为bottomright即可. <spa ...
- html语言图片无法居中,css设置图片无法居中是什么原因？
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,我们经常会设置图片居中显示,但有时我们会遇到css设置图片无法居中. 下面我们来看一下css设置图片无法居中是什么原因. css设置 ...
- CSS设置图片与文字水平居中对齐
很简单,设置图片的一个css样式即可,代码如下: <div><img src="url" style="vertical-align:middle;&q ...
- html中设置图片的对齐方式,align属性怎么用 图片align属性到底是什么意思
中align属性怎么使用?如下列代码: stock: W3C官方给出的解释是:所有浏览器都支持 align 属性的 "left" 和 "right" 值,除了 ...
- LaTeX设置图片左对齐
怎么在latex里把图片设置左对齐 用latex进行论文,有时会将图片左对齐 排版时的一些小经验 其程序如下: \begin{flushleft} *** *** \end{flushleft} 其结 ...
最新文章
- 关于E1的一些扫盲资料
- Oracle的关系运算
- 如何诊断crs 安装时 root.sh 脚本执行错误
- 使用Vant完成DatetimePicker 日期的选择器
- hive常见的DDL操作
- 为什么别的手机都能接收wifi，而红米手机却收不到？
- 我的Java自学之路
- GIS制图人员的自我修养(2)--制图意识
- 启用IIS的Gzip压缩功能
- SSI指令使用详解（转）
- 华为eNSP BUG——关于OSPF Router ID选择问题
- java二进制流_java读写二进制流
- 黑客老王：一个人的黑客史
- 供配电系统自动化实训
- spring cloud拓扑图
- java 俄罗斯方块原理,俄罗斯方块设计原理
- 【转】波利亚酒鬼回家定理的证明
- C++异常之栈解旋（unwinding）
- 手机QQ协议抓包教程
- ole db提供程序 mysql_SQL SERVER 链接服务器使用