Страницы

Поиск по вопросам

суббота, 1 февраля 2020 г.

Вертикальная центровка текста внутри <button>: каким образом это реализует user-agent?

#html #css


Вообщем, делал сегодня кнопочки и задумался: а как происходит центровка текста внутри
кнопок, ведь это inline-block элемент. Понятно, что изменив display или line-height,
отцентровать текстовое содержимое не сложно. Но вопрос в другом: как это делает user-agent?
Я обнулил line-height и padding, проверил все стили и не нашёл причину такого поведения.
Текст магическим образом центруется по вертикали внутри inline-block-элемента, или
я что-то пропустил?

PS: попробуйте это сделать внутри обычного div с display: inline block, padding:
0 и нулевым line-height у текста. 
    


Ответы

Ответ 1



Как насчет такого варианта? div { display: inline-block; height: 60px; background: #eee; padding: 0; margin: 0; } div:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
Test
Если же вас волнует вопрос центровки текста по вертикали внутри UPD Если вытащить все свойства, которые превращают кнопку в кнопку, можно почти любой элемент стилизовать визуально: div { -apple-color-filter: none; -webkit-animation-trigger: auto; -webkit-appearance: button; -webkit-backdrop-filter: none; -webkit-backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-composite: source-over; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-fit: border; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; -webkit-box-shadow: none; -webkit-clip-path: none; -webkit-column-axis: auto; -webkit-column-break-after: auto; -webkit-column-break-before: auto; -webkit-column-break-inside: auto; -webkit-column-progression: normal; -webkit-cursor-visibility: auto; -webkit-dashboard-region: ; -webkit-font-kerning: auto; -webkit-font-smoothing: auto; -webkit-hyphenate-character: auto; -webkit-hyphenate-limit-after: auto; -webkit-hyphenate-limit-before: auto; -webkit-hyphenate-limit-lines: no-limit; -webkit-hyphens: manual; -webkit-initial-letter: normal; -webkit-line-align: none; -webkit-line-box-contain: block inline replaced; -webkit-line-clamp: none; -webkit-line-grid: none; -webkit-line-snap: none; -webkit-locale: ru; -webkit-margin-after-collapse: collapse; -webkit-margin-before-collapse: collapse; -webkit-marquee-direction: auto; -webkit-marquee-increment: 6px; -webkit-marquee-repetition: infinite; -webkit-marquee-style: scroll; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-mask-source-type: alpha; -webkit-nbsp-mode: normal; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-svg-shadow: none; -webkit-text-combine: none; -webkit-text-decoration-color: rgba(0, 0, 0, 0.847059); -webkit-text-decoration-line: none; -webkit-text-decoration-skip: auto; -webkit-text-decoration-style: solid; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgba(0, 0, 0, 0.847059); -webkit-text-emphasis-position: over right; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgba(0, 0, 0, 0.847059); -webkit-text-orientation: mixed; -webkit-text-security: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-color: rgba(0, 0, 0, 0.847059); -webkit-text-stroke-width: 0px; -webkit-text-underline-position: auto; -webkit-text-zoom: normal; -webkit-transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-user-select: text; align-content: normal; align-items: flex-start; align-self: auto; alignment-baseline: auto; alt: ""; animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgb(192, 192, 192); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: baseline; border-bottom-color: rgba(0, 0, 0, 0.847059); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(192, 192, 192); border-left-style: outset; border-left-width: 2px; border-right-color: rgb(192, 192, 192); border-right-style: outset; border-right-width: 2px; border-top-color: rgba(0, 0, 0, 0.847059); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; buffered-rendering: auto; caption-side: top; caret-color: rgba(0, 0, 0, 0.847059); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgba(0, 0, 0, 0.847059); color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; column-count: auto; column-fill: balance; column-gap: normal; column-rule-color: rgba(0, 0, 0, 0.847059); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; content: ; counter-increment: none; counter-reset: none; cursor: default; cx: 0px; cy: 0px; direction: ltr; display: inline-block; dominant-baseline: auto; empty-cells: show; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex-basis: auto; flex-direction: row; flex-flow: row nowrap; flex-grow: 0; flex-shrink: 1; flex-wrap: nowrap; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: system-ui; font-optical-sizing: auto; font-size: 11px; font-stretch: normal; font-style: normal; font-synthesis: style weight small-caps; font-variant: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; font-weight: normal; fullscreen-auto-hide-duration: ; fullscreen-inset-bottom: ; fullscreen-inset-left: ; fullscreen-inset-right: ; fullscreen-inset-top: ; glyph-orientation-horizontal: 0deg; glyph-orientation-vertical: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-row-end: auto; grid-row-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; hanging-punctuation: none; height: 18px; image-rendering: auto; isolation: auto; justify-content: normal; justify-items: normal; justify-self: auto; kerning: 0; left: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 13px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; margin-top: 2px; marker-end: none; marker-mid: none; marker-start: none; mask: none; mask-type: luminance; max-height: none; max-width: none; min-height: 15px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; orphans: auto; outline-color: rgba(0, 0, 0, 0.847059); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; padding-top: 2px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; paint-order: normal; perspective: none; perspective-origin: 19.9375px 30px; place-content: normal normal; place-items: flex-start normal; place-self: auto auto; pointer-events: auto; position: static; r: 0px; resize: none; right: auto; row-gap: normal; rx: 0px; ry: 0px; safe-area-inset-bottom: ; safe-area-inset-left: ; safe-area-inset-right: ; safe-area-inset-top: ; scroll-padding: 0px; scroll-padding-bottom: 0px; scroll-padding-left: 0px; scroll-padding-right: 0px; scroll-padding-top: 0px; scroll-snap-align: none none; scroll-snap-margin: 0px; scroll-snap-margin-bottom: 0px; scroll-snap-margin-left: 0px; scroll-snap-margin-right: 0px; scroll-snap-margin-top: 0px; scroll-snap-type: none; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak-as: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-color: rgba(0, 0, 0, 0); stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: center; text-anchor: start; text-decoration: none; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; top: auto; transform: none; transform-box: border-box; transform-origin: 19.9375px 30px; transform-style: flat; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vector-effect: none; vertical-align: baseline; visibility: visible; white-space: normal; widows: auto; width: 39.875px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; }
div
Но, магическое свойство, перемещающее текст по центру вы не найдете. Если ответить более точно на вопрос "Каким образом это реализует user-agent?", получится примерно следующее: "Написан код, который задает нужные параметры каждому тегу, в том числе и для

Комментариев нет:

Отправить комментарий