0

En el encabezado de mi página tengo un logo y un título.

También tengo un pie de página con un texto y una imagen.

El problema es que en el encabezado, ambos elementos están descolocados.

Y tanto en el encabezado como en el pie de página, quisiera saber si es posible que el texto esté literalmente en el centro, sin que haga caso a la imagen que haya, ya que sale desplazada. (Y sin tener problemas al redimensionar o cualquier cosa así)

Este es mi código actual, que aún con un vertical-align: middle; no funciona.

h2 {
  text-align: center;
}

.logo {
  width:200px;
  height: 50px;
  vertical-align: middle;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 85px;
  background-color:#ff3333;
  color:white;
  display: table;
  width: 100%;
  text-align:left;
  padding-left: 20px;
}
.header span{
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  display: table-cell;
  width: 100%;
  text-align: center;
  }
  
  
/* FOOTER */

#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
	background-color: #171717;
	color:#777766;
    display: table;
    width: 100%;
	text-align:center;
	overflow: hidden;
	position:fixed;
	
}

#footer span {
    vertical-align:middle;
    display: table-cell;
}

.back-to-top {
    background: none;
    margin: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 60;
    display: none;
    text-decoration: none;
    color: #ffffff;
    background-color: #171717;
}

.back-to-top i {
    font-size: 60px;
}
	<div class="header">
	<div class="logo"><img src="images/Logo_Logytel.jpg"></div>
		<span><h2> Formulario</h2></span><br>	
	</div>

<div id="footer">
			<span>© Empresa 2020</span>
			<a class="back-to-top" style="display: inline;" href="#">
				<img src="images/back_to_top.png" alt="Back to Top">
			</a>
	</div>

1 respuesta 1

1

Una solucion que se me ocurre a lo que propones es posicionar la imagen de forma absoluta, de esta forma, el texto no tomará en cuenta el posicionamiento, y al ser un header no te afectará en nada.

h2 {
  text-align: center;
}

.logo {
  position: absolute;
  width: 200px;
  height: 50px;
  vertical-align: middle;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 85px;
  background-color: #ff3333;
  color: white;
  display: table;
  width: 100%;
  text-align: left;
  padding-left: 20px;
}

.header span {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  display: table-cell;
  width: 100%;
  text-align: center;
}


/* FOOTER */

#footer {
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #171717;
  color: #777766;
  display: table;
  width: 100%;
  text-align: center;
  overflow: hidden;
  position: fixed;
}

#footer span {
  vertical-align: middle;
  display: table-cell;
}

.back-to-top {
  background: none;
  margin: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  z-index: 60;
  display: none;
  text-decoration: none;
  color: #ffffff;
  background-color: #171717;
}

.back-to-top i {
  font-size: 60px;
}


}
<body>

  <div class="header">
    <div class="logo"><img src="images/Logo_Logytel.jpg"></div>
    <span><h2> Formulario</h2></span><br>
  </div>

  <div id="footer">
    <span>© Empresa 2020</span>
    <a class="back-to-top" style="display: inline;" href="#">
      <img src="images/back_to_top.png" alt="Back to Top">
    </a>
  </div>

</body>

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.