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>