如何将表单的输入按钮对齐在中心？[复制]-解网

问：

这个问题在这里已经有答案了：

如何使元素水平居中？（131 个回答）

2个月前关闭。

我想居中对齐表单。input

但是，这是一个有多个 scss 文件的项目，我不想破坏它。

我需要尝试仅通过修改我在这里向您展示的CSS来对齐它，这样它就不会影响表单屏幕的其他元素。表单看起来不是很好，因为我们使用 scss，并且代码中未包含变量。

现在左对齐。input

我尝试了以下代码：

display: flex; 
justify-content: space-between; 
align-items: center;

但是它不起作用，输入按钮仍然向左对齐。

也许我展示的例子很少

.formulario {
    margin-top: 5rem;
    width: 100%;
}

.campo {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    label {
        flex: 0 0 10rem;
    }
    input {
        flex: 1;
        border: none;
        padding: calc(v.$separacion / 4);
        border-radius: 1rem;

        &:disabled {
            background-color: lighten(v.$negro, 30%);
            color: v.$blanco;
            cursor: not-allowed;
        }
    }
}

.boton {
    @include m.boton(v.$azul, v.$blanco);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boton-eliminar {
    @include m.boton(v.$rojo, v.$blanco);
}

<h1 class="nombre-pagina">LOGIN</h1>
<p class="descripcion-pagina">Inicia sesion con tus datos</p>

<form class="formulario" method="POST" action="/">
  <div class="campo">
    <label for="email">Email</label>
    <input 
      type="email"
      id="email"
      placeholder="Tu Email"
      name="email"
    >
  </div>

  <div class="campo">
        <label for="password">Password</label>
        <input 
            type="password"
            id="password"
            placeholder="Tu Password"
            name="password"
        />
    </div>

    <input type="submit" class="boton" value="Iniciar Sesión">

</form>



<div class="acciones">
    <a href="/crear-cuenta">¿Aún no tienes una cuenta? Crear una</a>
    <a href="/olvide">¿Olvidaste tu password?</a>
</div>

html css 输入 sass 显示

您的标题和问题并不完全匹配。SCSS 被处理成 CSS，因此通过修改 SCSS，您正在修改 CSS。当您询问如何在不修改 CSS 的情况下对齐表单元素时...这是不可能的，而且无论如何它似乎都不是你要问的。请编辑标题或问题，使其保持一致。

0赞 Diana 9/19/2023

感谢您的澄清@HereticMonkey。我使用翻译器，但我做得不好。我的意思是我正在使用更多的 scss 文件，我不想破坏它，现在我将尝试编辑它

答：

3赞 singleshubham 9/19/2023 #1

<style>
.boton {
  display: block;
  margin: auto;
}
</style>

这会将提交按钮与中心对齐。显示：块;属性使元素的行为类似于块级元素，边距：auto;属性会自动调整左边距和右边距，并在中心水平对齐元素。

3赞 Chandramol Pandey 9/19/2023 #2

如果你想把你所有的输入都放在中心，那么你必须简单地给你的表单 text-align：center 提供 css;

.formulario{
  text-align:center; 
}

如果您只想将提交按钮居中对齐，请将其提供给 margin：auto

.boton{
    margin:auto;
  }

希望您的代码能够正确执行

如何将表单的输入按钮对齐在中心？[复制]

How to align the input button of a form in the center? [duplicate]

评论

评论