JSFiddle - React, Tailwind, and code Playground
HTML
<footer class="footer middle">
<p class="f_copyright">Copyright © 2011. My Comapny Name. DPereyra - All Rights Reserved</p>
</footer>
CSS
.footer {
padding: 0px;
margin: 0px;
overflow: hidden;
color: #fff;
background: #555;
min-height: 100px;
/* height: 100px; можно и так*/
/* line-height: 100px; вручную */
}
.f_copyright {
padding: 0px;
margin: 0px;
}
JavaScript
//className это название класса который будим использовать для задания line-height
function verticalAlignByClass(className) {
//В этой части 1: мы находим все елементы с классом className -->
for(var i = 0; i < document.getElementsByTagName('*').length; i++) {
if(document.getElementsByTagName('*')[i].className.search('\\b' + className + '\\b') != -1) {
//cмотрим заданную минимальную высоту -->
var minHeight = getComputedStyle(document.getElementsByTagName('*')[i]).minHeight;
//<!-- Смотрим заданную высоту или вычесленную если её нет -->
var height = getComputedStyle(document.getElementsByTagName('*')[i]).height;
//Если min-height не задан то в ответ прийдет 0px
//Если height задан то его высота если не задан то вычесленная
//Исходя из этого мы вибираем по какому параметру будем выставлять line-height
//Если по min-height то 1
//Eсли по height или по вычесленой высоте то 2
var propertySelect = (minHeight !== '0px') ? 1 : 2;
switch (propertySelect) {
case 1:
//<!-- Собственно задаем line-height -->
document.getElementsByTagName('*')[i].style.lineHeight = minHeight;
break;
case 2:
//<!-- Собственно задаем line-height -->
document.getElementsByTagName('*')[i].style.lineHeight = height;
break;
default: alert("middle align don't work");
}
}
}
}
verticalAlignByClass('middle')