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

Question

[lavezzi1]

Я сделал кнопку с указанием height и line-height, они равны друг другу. Проблема в том, что в разных браузерах и с разным размером шрифта внутри кнопки, текст получается либо прижат вниз на пару пикселей либо наоборот вверх. Как вы верстаете типичные кнопки?

Answer 1

[Алексей Струков]

Не указывай height
Сделай паддинг вокруг текста равномерный и будет этот текст по середине

Comments

[lavezzi1]

Просто паддинг не прокатит. Во первых высота кнопки зависит от шрафта в таком случае и она не четна, 23рх, 25рх и тд. Нет контроля за высотой короче.

[Алексей Струков]

lavezzi1: а если будет четко-заданная высота, то как быть при смене шрифта или его размера?

[lavezzi1]

Алексей Струков: менять в завимости от размера шрифта

[Алексей Струков]

lavezzi1: тогда что вам мешает менять паддинг в зависимости от размера шрифта, чтобы получалась требуемая высота?
Есть вероятность что будет разница в 1 пиксель из за специфики реализации, но это стандартный способ создания кнопок.

Answer 2

[Alexander Litvinenko]

а flex пробовали?

Answer 3

[Сергей Горячев]

Я подключаю 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
}

Comments

[Алексей Струков]

Самописный или стандартный?

[Сергей Горячев]

Алексей Струков: Собирал для себя из разных источников.

[Алексей Струков]

Sergey Goryachev: ясно, а почему сразу не хотите проставить туда базовые маргины для h тегов и т.п.?
И еще box-sizing префиксов вроде давно не требует уже

[Сергей Горячев]

Алексей Струков:

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
}

А префиксы не убирал, файлу уже много лет. Займусь как-нибудь им. Нужно кое-что переделать уже.

[Алексей Струков]

Sergey Goryachev: я имею ввиду что у параграфов и заголовков должны быть маргины отличные от нуля, чтобы блоки текста имели разделители между собой.
Или вы иным способом решили эту проблему?

[Сергей Горячев]

Алексей Струков: Не, не, я маргины для отступов переопределяю из нуля. Мне удобней это сделать в файле базовых стилей для отдельного сайта.

[Алексей Струков]

Sergey Goryachev: ясно

Answer 4

[Лучник *range attack +10*]

Как вариант, можно сделать line-height равным кеглю шрифта и сделать padding вокруг. Кстати, для button line-height задавать не нужно. Там текст всегда выровнен по умолчанию.