个人中心
gpt4 book ai didi

html - 垂直和水平定位 div 中心

转载 作者：太空宇宙 更新时间：2023-11-04 00:53:44 25 4
gpt4 key购买 nike

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

最终结果应该是这样的:

enter image description here

垂直居中有问题。我的代码是:

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

如何实现这种效果？

最佳答案

你可以这样试试

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

关于html - 垂直和水平定位 div 中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55288524/

25 4 0
文章推荐： c - 优化parser函数c程序
文章推荐： c - ‘s’ 的存储大小未知 + 指向指针的指针
文章推荐： c - 警告 : unused parameter ‘data’ when creating a new thread
文章推荐： c - 如何在没有 float 的情况下提高准确性 C
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com