1

Tengo dos elementos en el header, un span, que es un boton para sacar un menu lateral y un div que contiene una foto y texto, me gustaria centrar el div con la foto y texto pero no me deja, intento con aling content o justify content pero no me deja, el span lo desplaza un poco lateralmente.

este es el codigo

<header id="site-head" {{#if @blog.cover_image}}style="background-image: url({{@blog.cover_image}})" {{/if}}>
  <div>
    <span onclick="openNav()">&#9776;</span>
  </div>
  <div class="vertical animated bounceInDown">
    <div id="site-head-content" class="inner">
      {{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
      <h1 class="blog-title">{{@blog.title}}</h1>
      <h2 class="blog-description">{{@blog.description}}</h2>
    </div>
  </div>
</header>

Las etiquetas que hay entre llaves ni caso, son cosas del cms

Si alguien me pudiese decir como dejarlo el div segundo centrado con el span pegado a la izquierda se lo agradecería. Aquí una imagen de como esta actualmente, se aprecia poco pero el bloque central no esta centrado, el boton del menu lateral lo desplaza levemente a la derecha

Imagen actual de la pagina

3 respuestas 3

1

Desde el html:

<header style="position:relative;" id="site-head" {{#if @blog.cover_image}}style="background-image: url({{@blog.cover_image}})" {{/if}}>
  <div style="position:absolute; top:10px; left:10px; z-index:1;" onclick="openNav()" >
    <span >&#9776;</span>
  </div>
  <div class="vertical animated bounceInDown">
    <div id="site-head-content" class="inner">
      {{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
      <h1 class="blog-title">{{@blog.title}}</h1>
      <h2 class="blog-description">{{@blog.description}}</h2>
    </div>
  </div>
</header>

4
  • De esta forma se queda como quiero pero lo que pasa es que ahora no va el menu, lo pincho y no hace nada, no deja ni clicarlo, alguna idea? el 28 abr. 2019 a las 22:41
  • acabo de editar la respuesta. es posible que el div que encierra el span es el que esta dimensionado como botón. de ser asi ( no veo tu código css ) aplica los estilos y el evento on click al div y no al span. el 30 abr. 2019 a las 14:27
  • tampco funciona, pasa lo mismo el 30 abr. 2019 a las 18:16
  • edite la respuesta nuevamente. esta vez agrega la propiedad z-index:1; también al div. para asegurar que el div este por encima del contenido. el 30 abr. 2019 a las 21:20
1

Una manera muy sencilla de centrar un elemento es usando la etiqueta center, sin embargo, esa etiqueta es obsoleta pero aún hay soporte por parte de los navegadores.

<center> aquí el elemento que debe centrarse </center>

Espero te sirva.

0

Por lo que pude entender es esto lo que quieres lograr, la etiqueta 'center' ya no se usa. si no es esto lo que andas buscando o no te funcionó publica el css para entender mejor que es lo que está sucediendo.

#site-head{
background-color: #000;
}
.menu-icon{
background-color: #ff4000;
}
.vertical{
background-color: #000080;
/* en la caja padre se usa display flex, align-items center y justify content center para centrar el div hijo */
display: flex;
justify-content: center;
align-items: center;
}
#site-head-content{
background-color: #ddd;
text-align: center; /* centrar el texto de la caja, si son elementos pues se usa lo mismo que la caja padre, display flex etc... */
}
#site-head-content img{
width: 100px;
}
<header id="site-head" {{#if @blog.cover_image}}style="background-image: url({{@blog.cover_image}})" {{/if}}>
  <div class="menu-icon">
    <span onclick="openNav()">&#9776;</span>
  </div>
  <div class="vertical animated bounceInDown">
    <div id="site-head-content" class="inner">
      <a id="blog-logo" href="{{@blog.url}}">
      <img src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" alt="Blog Logo" /></a>
      <h1 class="blog-title">blog.title</h1>
      <h2 class="blog-description">blog.description</h2>
    </div>
  </div>
</header>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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