1

Tengo varios div centrados y para ello he colocado este codigo en mi div contenedor.

Codigo HTML:

<div class="b_container">
  <div class="Zona" >
     <h3>Por Zona</h3>
  </div>
  <div class="Enti" >
      <h3>Por Entidad</h3>
  </div>
  <div class="person" >
    <h3>Por Persona</h3>
  </div>
  <div class="Top" >
    <h3>TOP 5 DE ENTIDAD</h3>
  </div>
</div>

Codigo CSS:

.b_container {
   padding: 10%;
   width: 100%;
   display: flex;
   justify-content: center;
}

Quiero poner un titulo arriba de estos div y dentro del contenedor. Justo en el cuador rojo como se ve en la imagen. En la linea roja quiero poner un h3

Sin embargo, el h3 que quiero colocar irá en ese cuadro rojo, pero al colocar un h3 se alinea con los div. Foto del error ¿Comó puedo centrar mi h3 para que este encima de los div sin ser afectado por el display?

2
  • Prueba a encapsular los contenedores en un div y que el titulo quede fuera de ese div (antes para ser concreto), si pones el código html puedo elaborarte una respuesta mas concreta. Commented el 12 nov. 2020 a las 10:56
  • Gracias, ya lo actualice con el HTML Commented el 12 nov. 2020 a las 11:06

3 respuestas 3

2

para el h3 pordes usar la propiedad Flex basis que aplica un tamaño inicial de un elemento flexible que de manera predeterminada es auto , pero esto solo no alcanza sino que tenes que hacer que los elementos puedan caerse y no obligarlos a permanecer en una sola linea esto lo haces con Flex-wrap son su valor en wrap, ahora solo resta decirle al texto de h3 que se alinea al centro con text-align

.box {
width:100px;
height:50px;
background-color:aqua;
margin:10px;
border:1px solid black
}

.b_container {
   
   width: 100%;
   display: flex;
   justify-content: center;
   flex-wrap:wrap
}

h3{
flex-basis:100%;
text-align:center
}
<div class="b_container">
  <h3>centrado del contenedor</h3>
  <div class="box" >
    
  </div>
  <div class="box" >
       
  </div>
  <div class="box" >
   
  </div>
  <div class="box" >
    
  </div>
</div>

1

Simple, crea un contenedor genérico <div> arriba de b_container y luego otro arriba de este último para encapsular todo:

body {
  font-family: sans-serif;
}

.b_container {
   padding: 0.5rem;
   width: 100%;
   display: flex;
   justify-content: center;
}

.b_container div {
  padding: 0.5rem;
  margin: 0 0.05rem;
  border: 2px solid darkgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title_container {
  text-align: center;
}
<div>
  <div class="title_container">
    <h2>El titulo va aqui</h2>
  </div>

  <div class="b_container">
    <div class="Zona">
      <h3>Por Zona</h3>
    </div>
    <div class="Enti">
      <h3>Por Entidad</h3>
    </div>
    <div class="person">
      <h3>Por Persona</h3>
    </div>
    <div class="Top">
      <h3>TOP 5 DE ENTIDAD</h3>
    </div>
  </div>
</div>

1

Comentarios:

  • Seguro lo estás tratando de colocar antes del div zona
  • Se te coloca en fila igual que el resto de los divs por acción del display flex que distribuye inicialmente a todos los elementos de izquierda a derecha sobre el eje horizontal
  • Los h# son elementos en bloque así que una salida es que lo coloques fuera del div con ID b_container y con eso queda acomodado como esperas
  • La otra es que:
    • Coloca los cuatro divs en un contenedor y deja al título fuera de este contenedor
    • Al contenedor principal que en este caso sería <div class="b_container"> deberás
      • Dejarlo sin alguna clase de propiedades y valores de flex
      • Ahora al div que contiene a zona, entidad, mes y top nuevamente dale un display flex para que esté solo afecte nuevamente a sus hijos internos y los distribuya en fila

Código:

CSS

.b_container {
    padding: 10%;
    width: 100%;
}
#resto{
    display: flex;
}

Y ahora tu HTML

<div class="b_container">
    <h3>hola</h3>
<div id="resto">
<div class="Zona" >
     <h3>Por Zona</h3>
  </div>
  <div class="Enti" >
      <h3>Por Entidad</h3>
  </div>
  <div class="person" >
    <h3>Por Persona</h3>
  </div>
  <div class="Top" >
    <h3>TOP 5 DE ENTIDAD</h3>
  </div>
</div>
</div>

Ahora podrías centrar horizontalmente el h3 sin comprometer a los demás elementos.

Ejemplo completo

    <style>
    .b_container {
       border: 1px solid crimson;
       width: 100%;
    }
    #resto{
      display: flex;
      justify-content: center;
    }
    h3 {
      text-align: center;
    }
    </style>
    
    <div class="b_container">
      <h3>hola</h3>
      <div id="resto">
        <div class="Zona" >
          <h3>Por Zona</h3>
        </div>
        <div class="Enti" >
          <h3>Por Entidad</h3>
        </div>
        <div class="person" >
          <h3>Por Persona</h3>
        </div>
        <div class="Top" >
          <h3>TOP 5 DE ENTIDAD</h3>
        </div>
      </div>
    </div>

1
  • Eliminé la otra respuesta tratando de ofrecer otra mas simple ya que estaba siendo redundante en la forma de acomodar al título y estaba desaprovechando lo que en su propia naturaleza ya ofrecen las etiquetas h#
    – user128299
    Commented el 12 nov. 2020 a las 12:35

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.