CSS3 Текст не будет вертикально выравниваться

Я пытаюсь сделать нижний колонтитул для своего веб-сайта, но текст внутри нижнего колонтитула показывает половину и половину из нижнего колонтитула. Я попытался исправить его, используя все методы, предложенные в How do I vertically center text with CSS?, и искал другие идеи в Интернете, но никто не работал (если я не испортил применение их к моему коду). Вот мой код. JSFiddle: http://jsfiddle.net/xyqgpr14/2/CSS3 Текст не будет вертикально выравниваться

Footer HTML

<nav class="navbar navbar-default navbar-bottom" role="navigation"> 
    <div class="container"> 
     <h1>Footer</h1> 
    </div> 
</nav>

Стиль CSS:

.navbar-bottom { 
    background-color: #222; 
    border-top: 2px solid #000; 
    height: 50px; 
    color: #777; 
    text-align: center; 
}

источник

2015-02-14 Will Scott

Поскольку вы используете Bootstrap, следовательно, маржа по умолчанию или отступы присутствуют на nav.

Добавьте к этому CSS:

.navbar-bottom * { 
    padding: 0; 
    margin: 0; 
}

Это позволит удалить маржу/отступы в дочерней диве СЧА.

Вот обновленный Fiddle: http://jsfiddle.net/xyqgpr14/3/

источник

2015-02-14 10:37:21

Спасибо, это сработало, я не знал, что CSS имеет «*», а изменение поля индивидов и отступов ничего не сделали. –

Рад помочь вам. :) –

Последний метод включает в себя:

.container { 
    position:relative; 
} 

h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

Или что-то подобное.

источник

2015-02-14 10:32:31

Это решение работало в JSFiddle, но когда я скопировал его ТОЧНО на мой сайт, нижний колонтитул переместился в середину веб-страницы и испортил всю веб-страницу. –

Попробуйте добавить margin: 0 auto; к вашему навигационному элементу. –

Есть несколько методов, которые можно использовать. Here're новейшие методы:

.navbar-bottom { 
    background-color: #222; 
    border-top: 2px solid #000; 
    height: 50px; 
    color: #777; 
    text-align: center; 
} 

.navbar-bottom .container { 
    position:relative; 
} 

.navbar-bottom h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Или

.navbar-bottom { 
    background-color: #222; 
    border-top: 2px solid #000; 
    height: 50px; 
    color: #777; 
    text-align: center; 
} 

.navbar-bottom .container { 
    display: table; 
} 

.navbar-bottom h1 { 
    display: table-cell; 
    vertical-align: middle; 
}

Ян Д. уже говорил о втором, вы можете попробовать мое, хотя! Я думаю, что это не сработало, так как вы скопировали его код ТОЧНО, он написал. Укажите целевой элемент в CSS, иначе можно перезаписать другой код сверху. Мой код можно копировать ТОЧНО, как есть! Оба они отлично работают. Просто скопируйте любой из них в свой jsfiddle и посмотрите на эффект. :)

источник

2015-02-14 11:00:57

CSS3 Текст не будет вертикально выравниваться

ответ

Смежные вопросы