您的位置：首页 > 其它

10、vertical-align（附img垂直对齐案例）

2016-06-29 21:42 399 查看

vertical-align 属性(设置元素的垂直对齐方式)

  
 注：多用于设置行内元素的图片和文字的对其方式
    baseline
默认。元素放置在父元素的基线上。

    sub 垂直对齐文本的下标。

    super 垂直对齐文本的上标

    top 把元素的顶端与行中最高元素的顶端对齐

    text-top 把元素的顶端与父元素字体的顶端对齐

    middle 把此元素放置在父元素的中部。

    bottom 把元素的顶端与行中最低的元素的顶端对齐。

    text-bottom 把元素的底端与父元素字体的底端对齐。

    length  %
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

    inherit 规定应该从父元素继承 vertical-align 属性的值。

让连续多张图片之间无间距，img标签默认有间距，因此需要处理，处理方式如下几个案例
案例1：
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>img垂直对齐</title>
<style>/*css样式表的衣柜*/
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/

img{vertical-align:top;}
</style>
</head>
<body><!--身体-->
<div>去除默<img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默</div>
<div><img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默</div>
<div><img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默</div>
<img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默
<img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默
<img width="100" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>去除默
</body>
</html>


案例2：
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>img垂直对齐</title>
<style>/*css样式表的衣柜*/
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/

img{/*vertical-align:top;*/float:left;}
li{float:left;}
</style>
</head>
<body><!--身体-->
<ul>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
<li><img width="500" height="50" src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></li>
</ul>
</body>
</html>


案例3：
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>img垂直对齐</title>
<style>/*css样式表的衣柜*/
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/

img{display:block;}
</style>
</head>
<body><!--身体-->
<img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>
<div><img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></div>
<div><img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/></div>
<img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>
<img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>
<img src="images/ChEi2VYKf6CADhQxAADFC3Hf1WY43400.jpg"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航