个人中心
gpt4 book ai didi

Display all elements align in separeted lines(显示以分隔线对齐的所有元素)

翻译 作者：bug小助手 更新时间：2023-10-26 22:23:18 25 4
gpt4 key购买 nike



i'm studying alignments in css and html and have a doubt.

我正在研究css和html中的对齐，我有一个疑问。


how can i put each element of this 'login form' in different lines while keeping then centered horizontaly and verticaly?

我怎样才能把这个‘登录表单’的每个元素放在不同的行中，同时保持水平和垂直居中呢？


<div class="container">
  <div class="tr">
    <div class="form">
      <div class="fields">
        <img src="https://www.kasandbox.org/programming-images/avatars/leaf-blue.png">
        <input type="text" placeholder="usuario">
        <input type="password" placeholder="senha">
        <button class="btn-log">some action</button>
        <a>some text</a>      
      </div>
    </div>
  </div>
</div>

css

CSS


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

img{
  width: 30%;
}

.tr{
  width: 50%;
  height: 50%;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form{
  width: 80%;
  height: 80%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

更多回答

You have display: flex on .form instead of .fields. You're also missing flex-direction: column.

在.form上有display：flex而不是. fields。您还缺少flex-direction：column。

优秀答案推荐

Is this the effect you want?

这是你想要的效果吗？




body {
  min-height: 100vh;
  margin: 0;
}
.container {
  width: 100%;
  min-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

img {
  width: 30%;
}

.tr {
  width: 50%;
  height: 50%;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 80%;
  height: 80%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fields {
  display: flex;
  flex-direction: column;
  text-align: center;
}

input {
  text-align: inherit;
}

<div class="container">
  <div class="tr">
    <div class="form">
      <div class="fields">
        <img src="https://www.kasandbox.org/programming-images/avatars/leaf-blue.png">
        <input type="text" placeholder="usuario">
        <input type="password" placeholder="senha">
        <button class="btn-log">some action</button>
        <a>some text</a>      
      </div>
    </div>
  </div>
</div>




更多回答

kind off, but I don't understand why the text and image are not being centered as the rest of the fields.

差不多了，但我不明白为什么文本和图像不像其他字段那样居中。

thanks for the help, adding the flex-direcito: column solve the problem i mentioned earlier.

感谢您的帮助，添加flex-Direcito：列解决了我前面提到的问题。

You mean the values in the input fields? Just needs text-align: center; I updated the snippet.

您是说输入域中的值吗？只需要文本对齐：Center；我更新了代码片段。

25 4 0
文章推荐： Python: Find the longest word in a string(Python：查找字符串中最长的单词)
文章推荐： React typescript error Parsing error: '>' expected(REACT打字脚本错误分析错误：‘>’预期)
文章推荐： How can i send notifications in a PWA?(如何在PWA中发送通知？)
文章推荐： Resizing of div based on the width of the screen(根据屏幕宽度调整div的大小)
bug小助手
个人简介

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

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