5

Cree una cabezera en la cual quiero insertar un logo a la izquierda seguido de un titulo que quede centrado y a la mitad del logo, como por ejemplo esto: con el codigo que tengo hasta el momento no lo eh logrado, alguien podria ayudarme porfavor.

ejemplo

* {
    margin: 0px;
    padding: 0px;
   } 
   #cabecera {
     
    background: #FFFBB9;
    border: 2px solid #0a3fee;
    padding: 10px;
   }
   .logo{
    width: 200px;
    height: 200px;
     border: 2px solid #ee930a;
     margin: none;
     
   }
<html>
            
<head>
<title>Mi pagina</title>
             
</head>
            
<div id="agrupar">
<header id="cabecera">
<img class="logo" src="LOGO.png">
<h1 id="titulo"> titulo de mi pagina</h1>
</header>
</div>
</html>

3 respuestas 3

6

Puedes utilizar flexBox

  1. En el bloque padre cabecera añades display:flex y align-items:center para que los elementos queden centrados verticalmente.

  2. En el bloque hijo titulo añades flex-grow:1 para que ocupe todo el espacio restante y text-align:center para centrarlo horizontalmente.

En tu codigo quedaria asi:

* {
    margin: 0px;
    padding: 0px;
   } 
   #cabecera {
     
    background: #FFFBB9;
    border: 2px solid #0a3fee;
    padding: 10px;
    display:flex;
    align-items:center;
   }
   .logo{
    width: 200px;
    height: 200px;
     border: 2px solid #ee930a;
     margin: none;
     
   }
   #titulo{
    flex-grow:1;
    text-align:center;
   }
<html>
            
<head>
<title>Mi pagina</title>
             
</head>
            
<div id="agrupar">
<header id="cabecera">
<img class="logo" src="LOGO.png">
<h1 id="titulo"> titulo de mi pagina</h1>
</header>
</div>
</html>

3

Lo puedes hacer con CSS GRID de este modo:

  • Creas 2 columnas con un ancho igual de 1fr
  • Dentro de la etiqueta principal header colocas tanto tu imagen como el h1 dentro de 2 divs
  • Le asignas un ancho y un alto personalizado a los 2 divs para lograr que no ocupen el 100% del espacio disponible de su etiqueta padre
  • Para centrar el texto del título solo aplicas un text-align: center;

Código:

    <style>
      header{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background-color: pink;
      }
      div{
        background-color: red;
        width: 150px;
        height: 150px;
      }
      #titulo{
        font-size: 14px;
        background-color: green;
        text-align: center;
      }
    </style>
    <header>
      <div id="logo">
        Logo
      </div>
      <div id="titulo">
        <h1>Título de la página</h1>
      </div>
    </header>

2

Esto se produce debido a que las etiquetas h1 tienen por defecto la propiedad display: block y esto hace que actúen como bloques y que el texto se baje justo debajo de la imagen.

Sin embargo, puedes hacer que los elementos actúen como elementos inline (que se sitúen en la misma línea) pero teniendo las propiedades de los bloques (pueden tener altura, anchura...). Esto se consigue mediante la propiedad display: inline-block. De esta manera, el texto se situará a la derecha de la imagen ya que se posicionará en la misma línea que esta.

Por último, podrías utilizar la propiedad vertical-align: middle sobre la imagen para que la imagen y el texto se alineen de forma vertical.

Si además quieres centrar el texto horizontalmente en el espacio que queda deberás de ponerle una anchura al header y en el texto hacer uso de la propiedad text-align: center; y de la propiedad calc para la anchura, la cual te permite hacer cálculos del espacio que queda, en este caso le he restado a la anchura total del header, la anchura de la imagen + los bordes + el padding, tanto de la cabecera como de la imagen.

* {
  margin: 0px;
  padding: 0px;
} 
   
#cabecera {
  background: #FFFBB9;
  border: 2px solid #0a3fee;
  padding: 10px;
}

.logo{
  width: 200px;
  height: 200px;
  border: 2px solid #ee930a;
  margin: none;
  vertical-align: middle;
}

#titulo{
  display: inline-block;
  text-align: center;
  width: calc(100% - 228px);
}
<div id="agrupar">
  <header id="cabecera">
    <img class="logo" src="LOGO.png">
    <h1 id="titulo"> titulo de mi pagina</h1>
  </header>
</div>

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.