0

Llevo un rato intentando centrar el contenido del sidebar en una web en html y css y no sé porque cada elemento aparece movido respecto al otro. Quiero que estén todos centrados. He intentado usar text-align:center y no queda centrado ni el h2 ni el h3. Quedan cada uno en una posicion distinta. En el formulario el primer input aparace desplazado hacia la derecha respecto al de abajo.

#sidebar {
  margin-top: 50px;
  float: none;
  margin-left: 50px;
  display: block;
  text-align: center;
  width: 25%;
  border: 1px solid black;
  height: 600px;
}

#sidebar h2 {
  width: 100%;
  
}
#sidebar h3 {
text-align: center;}

#formulario {
text-align: center;
width: 100%;
justify-content: center;

}

#campo1 {
  margin-bottom: 15px;
  

}
#campo2 {
  margin-bottom: 15px;
  
}

#footer {
  float: none;
  display: block;
  text-align: center;
  margin-top: 20px;
}
<aside id="sidebar">
       <h2>barra lateral</h2>
      <h3>formulario</h3>
      <form action="">
        <div id="campo1"><label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre"></div>
        <div id="campo2"><label for="email">Email:</label>
          <input type="email" name="email" id="email"></div>
        
          <input type="submit" value="Enviar">


      </form>
     
    
    </aside>

1

1 respuesta 1

0

Tal parece que lo deseas en verdad es que los input se alineen por separado a una misma altura, te presentó una solución agregando la etiqueta <table> y con ello <th> y <tr>

Información de etiqueta table

HTML

<aside id="sidebar">
       <h2>barra lateral</h2>
      <h3>formulario</h3>
      <form action="">
        <table>
          <tr>
            <th>
        <div id="campo1"><label for="nombre">Nombre:</label>
          </th><th>
        <input type="text" id="nombre" name="nombre"></div>
          </th>
          </tr>
  <tr>
    <th>
        <div id="campo2"><label for="email">Email:</label>
          </th><th>
          <input type="email" name="email" id="email"></div>
  </th></tr>
<th>
          <input type="submit" value="Enviar">
  </th>
        </table>
      </form>
    </aside>

CSS

#sidebar {
  margin-top: 50px;
  float: none;
  margin-left: 50px;
  display: block;
  text-align: center;
  width: 25%;
  border: 1px solid black;
  height: 600px;
}
#sidebar h2 {
  width: 100%;
}
#sidebar h3 {
text-align: center;
}
#formulario {
text-align: center;
width: 100%;
justify-content: center;
}

Adjunto resultado, con la implementación de table: https://codepen.io/mabmab159/pen/KKXKwGX

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.