lavezzi1
@lavezzi1

Как вы выравниваете текст внутри кнопки?

Я сделал кнопку с указанием height и line-height, они равны друг другу. Проблема в том, что в разных браузерах и с разным размером шрифта внутри кнопки, текст получается либо прижат вниз на пару пикселей либо наоборот вверх. Как вы верстаете типичные кнопки?
  • Вопрос задан
  • 6539 просмотров
Пригласить эксперта
Ответы на вопрос 4
pm_wanderer
@pm_wanderer
junior-HTML
Не указывай height
Сделай паддинг вокруг текста равномерный и будет этот текст по середине
Ответ написан
edli007
@edli007
full stack, team lead
а flex пробовали?
Ответ написан
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Я подключаю reset.css, после которого такой проблемы не возникает.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0
}
html, body {
    width: 100%;
    height: 100%
}
a {
    outline: 0;
    border: 0
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
fieldset, img {
    border: 0
}
address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal
}
ol, ul, nav, menu {
    list-style: none
}
caption, th {
    text-align: left
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}
q:before, q:after {
    content: ''
}
abbr, acronym {
    border: 0
}
header, footer, nav, aside {
    display: block
}
input, textarea {
    outline: 0;
    border: 0
}
input:active, textarea:active {
    outline: 0;
    border: 0
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table
}
.clearfix:after {
    clear: both
}
.clearfix {
    zoom: 1
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
input, label, select, button, textarea {
    margin: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: 0;
    line-height: 1;
    font-size: 13px;
    font-family: Arial
}
input:focus {
    outline: 0
}
input, textarea {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
input[type=checkbox], input[type=radio] {
    width: 13px;
    height: 13px
}
input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box
}
::-webkit-search-decoration {
    display: none
}
button, input[type="reset"], input[type="button"], input[type="submit"] {
    overflow: visible;
    width: auto
}
::-webkit-file-upload-button {
    padding: 0;
    border: 0;
    background: 0
}
textarea {
    vertical-align: top;
    overflow: auto
}
select[multiple] {
    vertical-align: top
}
Ответ написан
kon-rafikov
@kon-rafikov
Не забывайте отмечать решение
Как вариант, можно сделать line-height равным кеглю шрифта и сделать padding вокруг. Кстати, для button line-height задавать не нужно. Там текст всегда выровнен по умолчанию.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы