网页布局：姓名输入框和选择框居中显示
<!DOCTYPE html>
<html>
<head>
<title>网页布局：姓名输入框和选择框居中显示</title>
<style>
body {
background-color: lightblue;
background-image: url('北极熊.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<pre><code> .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input-box,
.select-box {
width: 20%;
margin: 10px;
}
</style>
</code></pre>
</head>
<body>
<div class='container'>
<input type='text' class='input-box' placeholder='请输入姓名'>
<select class='select-box'>
<option value='孙悟空'>孙悟空</option>
<option value='唐僧'>唐僧</option>
<option value='猪八戒'>猪八戒</option>
<option value='沙僧'>沙僧</option>
<option value='玉皇大帝'>玉皇大帝</option>
<option value='观音菩萨'>观音菩萨</option>
<option value='如来佛祖'>如来佛祖</option>
<option value='白骨精'>白骨精</option>
<option value='女儿国国王'>女儿国国王</option>
<option value='牛魔王'>牛魔王</option>
<option value='夏海生'>夏海生</option>
</select>
</div>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/fvSi 著作权归作者所有。请勿转载和采集!