DIV+CSS竖直垂直居中1个波动元素

日期:2020-10-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

情景:在1个固定不动高宽比的div中,有1个波动的元素,必须将这个波动元素竖直垂直居中。

初始编码以下:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper{
width: 400px;
height: 300px;
background-color: #1f8dd6;
}
button{
float: right;
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<button>float right.</button>
</div>
</body>
</html>

如今只是简易的设定这个button波动,完成的实际效果看起来就像这样:

如今必须将这个button在全部div里竖直垂直居中。我的做法是在这个button外层加1个span,而且波动这个span元素而并不是以前的button。此外必须设定这个span的高和行高与外层div同样。


拷贝编码
编码以下:

span{
float: right;
height: 300px;
line-height: 300px;
}

如今应当就变为这样了:

详细编码:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper{
width: 400px;
height: 300px;
background-color: #1f8dd6;
}
span{
float: right;
height: 300px;
line-height: 300px;
}
button{
float: right;
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<span>
<button>float right.</button>
</span>
</div>
</body>
</html>