我目前有以下内容。这些控件彼此垂直放置 - 让这些控件水平并排放置并在 div 元素内居中的最简单方法是什么？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>center controls</title>
<!-- <link rel="Stylesheet" href="styles.css" type="text/css" /> -->
<style media="screen" type="text/css">
#dropDownDiv {
position: absolute;
border: 2px solid #73AD21;
left: 150px;
top: 15px;
width: 300px;
height: 35px;
}
select {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dropDownDiv">
<select id="opt1">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
<select id="opt2">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
</div>
</body>
</html>最佳答案
您可以只删除 select{display: block;} 部分，然后按照 Dekel 所说的方式定位 #dropDownDiv。
display: block; 本质上意味着:将元素放在新的一行中。只是让你知道。我花了 2 年时间才学会 ;) 它还有其他功能，但您可以阅读它们。
看看这个:https://codepen.io/anon/pen/PKVrEG我使用了上面链接中的 flexbox。网格给了我一些奇怪的结果 您需要做的就是将这 3 行添加到 #dropDownDiv 样式中
display: flex;
justify-content: center;
align-items: center;
这也适用于大小未知的子元素。
关于html - 在 div 中水平和垂直居中 2 个选择控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46016081/