居中2选择控件在div中水平和垂直

Question

我目前有以下。 控件垂直放置在彼此的顶部上-最简单的方法是使这些控件水平并排放置并且都位于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>

Answer 1

您可以将select元素设置为inline-block而不是block并且text-align其容器的text-align设置为center ：

 select { display: inline-block; margin: 9.5px 0 0 0; padding: 0; } #dropDownDiv { text-align: center; position: absolute; border: 2px solid #73AD21; left: 150px; top: 15px; width: 300px; height: 35px; }

 <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>

Answer 2

您可以只删除select{display: block;}部分，然后按Dekel所说的#dropDownDiv进行定位。

display: block; 本质上意味着：将元素放在新行中。 只是让你知道。 我花了两年时间才学会它；）它具有其他功能，但是您可以阅读它们。

看一下这个： https ://codepen.io/anon/pen/PKVrEG我从上面的链接中使用了flexbox。 网格给了我一些奇怪的结果，所有您需要做的就是将这3行添加到#dropDownDiv样式中

  display: flex;
  justify-content: center;
  align-items: center;

这也适用于大小未知的子元素。

居中2选择控件在div中水平和垂直

问题描述

2 个解决方案

解决方案1
1 2017-09-02 16:55:09

解决方案2
1 已采纳 2017-09-02 17:09:09

居中2选择控件在div中水平和垂直

问题描述

2 个解决方案

解决方案1 1 2017-09-02 16:55:09

解决方案2 1 已采纳 2017-09-02 17:09:09

解决方案1
1 2017-09-02 16:55:09

解决方案2
1 已采纳 2017-09-02 17:09:09