运用vertical

日期:2021-03-07 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

最后完成实际效果为完成行内元素的水平、竖直垂直居中对齐,实际效果图以下:

 

接下来为完成编码:

拷贝编码
编码以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF⑻" />
<title> 运用vertical-align完成照片竖直垂直居中对齐 </title>
<style>
#content {
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
width:500px;
height:500px;
background-color:yellow;
text-align:center;
}
.vertical-align-span {
display:inline-block;
width:1px;
height:100%;
margin-left:⑴0px;
vertical-align:middle;
}
#content img{
vertical-align:middle;
}
</style>
</head>
<body>
<div id="content">
<span class="vertical-align-span"></span>
<img src="5.jpg">
</div>
</body>
</html>

基础理论基本:

看1下W3C上对vertical-align的界定:vertical-align 特性设定元素的竖直对齐方法。该特性界定行内元素的基准线相对该元素所属行的基准线的竖直对齐。容许特定负长度值和百分比值。这会使元素减少而并不是上升。在表模块格中,这个特性会设定模块格框中的模块格內容的对齐方法。(务必认可这句话我看了很久页没看懂,后来在blog园看了学明弟兄的文章内容才搞清楚了大约);


学明弟兄觉得它有两种用法:

第1种用法,先看后边1句“在表模块格中,这个特性会设定模块格框中的模块格內容的对齐方法。”这很非常容易了解,假如给1个报表的td加1个 vertical-align:middle的款式,报表里边的內容会竖直垂直居中,一样的假如给1个vertical-align:bottom就会底部对齐,假如给1个vertical-align:top就会顶部对齐。

第2种用法,看前页1句“该特性界定行内元素的基准线相对该元素所属行的基准线的竖直对齐。”技术专业的語言我不容易说的,能够打个比喻:假定有两个行内元素a和 b,a和b全是img,当a加了1个vertical-align:middle款式以后,b的底部(基准线)就会对齐a的正中间部位,以下图:

 

假如a和b都加了1个vertical-align:middle款式,那末就相互之间对齐了对方的正中间部位,也便是它们在竖直方位上的中线对齐了,以下图:

 

说到这里,思路就清楚了。

一样的基本原理对文本等也可用。
上一篇:淘宝导航栏栏css编码共享 返回下一篇:没有了