Question

有几个div。我想根据需要设置black的宽度，并将其放在red的中间（水平）。然后将black中的某些元素放在一行中，并将它们放在black的中间（垂直）上。

最终结果应如下：

垂直居中存在问题。我的代码是：

<html>
    <body>  
        <div id="mainContainer">
          <div id="singleOptions">
            <div id="myObject"></div>
            <div id="mySecondObject"></div>
          </div>
        </div>      
    </body>
    <style>
        #mainContainer {
          background: red;
          width: 100px;
          height: 100px;
          margin-top: 50px;
          text-align: center;
        }
        #singleOptions {
          height: 100%;
          background: black;
          display: inline-block;
        }
        #myObject {
          width: 10px;
          display: inline-block;
          height: 10px;
          background: green;
        }   
        #mySecondObject {
          width: 10px;
          display: inline-block;
          height: 10px;
          background: yellow;
        }
    </style>
</html>

如何获得这种效果？

Answer 1

您可以使用flexbox来实现：

#mainContainer {
    background: red;
    width: 100px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
}
#singleOptions {
    height: 100%;
    background: black;
    display: flex;
    align-items: center;
}
#myObject {
    width: 10px;
    display: inline-block;
    height: 10px;
    background: green;
}   
#mySecondObject {
    width: 10px;
    display: inline-block;
    height: 10px;
    background: yellow;
}

<div id="mainContainer">
    <div id="singleOptions">
    <div id="myObject"></div>
    <div id="mySecondObject"></div>
    </div>
</div>

Answer 2

您可以这样尝试

#mainContainer {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  text-align: center;
}

#singleOptions {
  height: 100%;
  background: black;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  width: min-content;
  align-items: center;
}

#myObject {
  width: 10px;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  background: green;
}

#mySecondObject {
  width: 10px;
  display: inline-block;
  height: 10px;
  background: yellow;
}

<html>

<body>
  <div id="mainContainer">
    <div id="singleOptions">
      <div id="myObject"></div>
      <div id="mySecondObject"></div>
    </div>
  </div>
</body>

</html>

Answer 3

使用Flexbox可以轻松解决。

按以下步骤更改#singleOptions的CSS。

#singleOptions {
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

将div垂直和水平居中放置

3 个答案: