You can use display:table
and display:table-cell
property.
Vertically centered text
HTML:
<footer>
<p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>
CSS:
footer {
display: table;
position: relative;
height: 15vh;
width: 100vw;
background: #1a1a1a;
border-top: 1px solid #232323;
color: #a0a0a0;
padding-left: 5%;
box-sizing: border-box;
}
footer p {
display: table-cell;
vertical-align: middle;
line-height: 1vh;
}
footer {
display: table;
position: relative;
height: 15vh;
width: 100vw;
background: #1a1a1a;
border-top: 1px solid #232323;
color: #a0a0a0;
padding-left: 5%;
box-sizing: border-box;
}
footer p {
display: table-cell;
vertical-align: middle;
line-height: 1vh;
}
<footer>
<p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>
Or you can use flex
property,but its not supported by many browser version
Align using flex property
CSS:
footer {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /*ALIGN VERTICAL*/
position: relative;
height: 15vh;
width: 100vw;
background: #1a1a1a;
border-top: 1px solid #232323;
color: #a0a0a0;
padding-left: 5%;
box-sizing: border-box;
}
footer p {
line-height: 1vh;
}
footer {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /*ALIGN VERTICAL*/
position: relative;
height: 15vh;
width: 100vw;
background: #1a1a1a;
border-top: 1px solid #232323;
color: #a0a0a0;
padding-left: 5%;
box-sizing: border-box;
}
footer p {
vertical-align: middle;
line-height: 1vh;
}
<footer>
<p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>