Question

我目前有以下内容。控件垂直放置在彼此之上 - 将这些控件水平并排放置在div元素内部的最简单方法是什么？

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

center

＆＃13;

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

＆＃13;

Answer 2

你可以删除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;

这也适用于尺寸未知的子元素。

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

2 个答案: