Estoy tratando de hacer una página de inicio de la aplicación usando el marco de arranque (Bootstrap 4 alpha). Mientras trataba de alinear todo en el centro, usé text-align:center en la identificación de jumbotron. Todo excepto el formulario de correo electrónico alineado.

¿Hay alguna forma de alinear el formulario de correo electrónico en el centro y también asegurarse de que permanezca en el centro independientemente del ancho de la página web?

Este es el código en la hoja de estilo.

.jumbotron 
{
    background-image: url(background.jpg);
    text-align: center;
    margin-top: 50px;
}

Este es el código principal.

<div class="jumbotron" id="jumbotron">
    <h1 class="display-3">My Awesome App!</h1>
    <p class="lead">This is why YOU should download this fantastic app!</p>
    <hr class="m-y-2">
    <p>Want to know more? Join our mailing list!</p>

    <form class="form-inline" id = "emailbar">
        <div class="form-group">
            <label class="sr-only" for="email">Email address</label>
            <div class="input-group">
                <div class="input-group-addon">@</div>
                <input type="email" class="form-control" id="email" placeholder="Your email">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign up</button>
    </form>
</div>
0
Samba 26 jun. 2017 a las 11:02

3 respuestas

La mejor respuesta

Como su formulario tiene display: flex, abarca todo el ancho de su padre.

Además, el text-align: center en su clase jumbotron no se aplicará al elemento de formularios, ya que son elementos flexibles.

Así que cambie cualquiera de estos en su clase form-inline

  • cámbielo a display: inline-flex (y se aplicará text-align: center)

  • agregue justify-content: center; (la propiedad Flexbox para alinear horizontalmente en la dirección de la fila)


Para orientar solo la emailbar, haz esto

#emailbar {
  display: inline-flex;
}

O esto

#emailbar {
  justify-content: center;
}
0
Ason 26 jun. 2017 a las 08:24

No hay razón para CSS adicional. Simplemente use justify-content-center en el formulario ...

https://www.codeply.com/go/7LjBkEtvVV

<form class="form-inline justify-content-center" id = "emailbar">
    <div class="form-group">
        <label class="sr-only" for="email">Email address</label>
        <div class="input-group">
            <div class="input-group-addon">@</div>
            <input type="email" class="form-control" id="email" placeholder="Your email">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>
0
Zim 26 jun. 2017 a las 12:17

Simplemente agregue la parte css en jumbotron para obtener el centro.

.jumbotron {
    background-image: url(background.jpg);
    text-align: center;
    margin-top: 50px;
    display: flex;/*Add this*/
    flex-direction: column; /*Add this*/
    align-items: center; /*Add this*/
}

Fiddle de trabajo

.jumbotron {
    display: flex;/*Add this*/
    flex-direction: column; /*Add this*/
    align-items: center; /*Add this*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="jumbotron" id="jumbotron">
  <h1 class="display-3">My Awesome App!</h1>
  <p class="lead">This is why YOU should download this fantastic app!</p>
  <hr class="m-y-2">
  <p>Want to know more? Join our mailing list!</p>
  <form class="form-inline" id="emailbar">
    <div class="form-group">
      <label class="sr-only" for="email">Email address</label>
      <div class="input-group">
        <div class="input-group-addon">@</div>
        <input type="email" class="form-control" id="email" placeholder="Your email">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
  </form>
</div>
0
LKG 26 jun. 2017 a las 08:40