css 我希望输入位于div的中心

nbysray5 于 2023-06-07 发布在其他

关注(0)|答案(4)|浏览(182)

内容未放置在分区中心
我试着在一个div的中心做一个form，t认为所有的值都是正确的，但是form没有得到中心，这是form在div的内容中的代码，但是form粘在div的上面，我不知道为什么

form#id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  position: relative;
  width: 80vmin;
  border: solid white 5px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  align-items: center;
  justify-content: center;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 29px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="square">
    <div class="content">
      <form id="id">
        <label for="input1">write ID</label>
        <input type="number" name="input1" id="input1" placeholder="id">
      </form>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/76389128/i-want-to-inputs-be-in-the-center-of-div

4条答案

按热度按时间

dffbzjpn1#

.square:after下的伪类将其推到顶部，因为它的padding bottom为100%。尝试注解整个块，您将在中间看到整个表单。
sidenote：你可以使用justify-content: center;，因为它更快。

赞(0）回复(0）举报 2023-06-07

jvlzgdj92#

我也是初学者，但我认为这会有帮助。
试试这个

#id {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 30px;
padding-top: 50%;
}

padding-top：50%将把你的形式到广场的中心。

赞(0）回复(0）举报 2023-06-07

up9lanfz3#

在.content类中添加display:flex

.content {
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      border-radius: 29px;
    }

赞(0）回复(0）举报 2023-06-07

hof1towb4#

这样有用吗
另外，请参见：https://blog.hubspot.com/website/center-div-css

.container {
    background: yellow;
    padding:20px;
  }
  
.square {
    position: relative;
    width: 80vmin;
    border: solid white 5px;
    justify-content: center;
    border-radius: 30px;
    margin:auto;
  }
  
.content {
    position: absolute;
    align-items: center;
    justify-content: center;
    height:100%;
    display:flex;
    text-align:center;
  }
  
form#id {
}
  
.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    align-items: center;
    justify-content: center;    
  }

<body>
    <div class="container">
        <div class="square">
            <div class="content">
                <form id="id">
                    <label for="input1">Write-ID</label>
                    <input type="number" name="input1" id="input1" placeholder="id">
                </form>
          </div>
        </div>    
    </div>
</body>

赞(0）回复(0）举报 2023-06-07

我来回答

css 我希望输入位于div的中心

4条答案

相关问题

热门标签

最新问答