CSS设置图片的对齐

最新推荐文章于 2024-07-28 17:33:37 发布

量变决定质变

最新推荐文章于 2024-07-28 17:33:37 发布

阅读量1.2w

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52576440

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

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>

代码如上，类比文字的竖直对齐方式，图片的竖直对齐方式的效果基本相同，而且，无论图片本身的高度是多少。