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>
代码如上,类比文字的竖直对齐方式,图片的竖直对齐方式的效果基本相同,而且,无论图片本身的高度是多少。