Строка-высота и динамическая высота div

Мне интересно, как я могу установить высоту линии всегда равной высоте контейнера div - чтобы центрировать элемент внутри контейнера посредине высоты контейнер.Строка-высота и динамическая высота div

Допустим, у меня есть следующие:

<div style="height:12%"> 
<i style="line-height:??"></i> 
</div>

Как я могу установить высоту строки, так что она изменяет с изменениями, когда высота изменяется контейнер DIV?

Благодаря
uksz

источник

2016-01-25 uksz

Это не совсем понятно, что вы пытаетесь здесь получения идеальной. Не могли бы вы дать немного больше информации? line-height всегда относится к шрифту, поскольку в большинстве случаев это необходимо. Вы пытаетесь сосредоточить его? –

@ DanielCasserly, да, это именно то, что я пытаюсь сделать. Редактирование должности в одно мгновение. – uksz

@uksz - то, что вы пытаетесь вертикально сосредоточиться здесь - вы можете попробовать один из методов центрирования внутри div с динамической высотой в моем ответе [здесь] (http://stackoverflow.com/a/33362841/703717) – Danield

-1

интуитивный путь будет установить line-height в 100%, но это на самом деле просто устанавливает высоту строки 100% размер шрифта

Предполагая, что вы, вероятно, хотите отцентрировать ваш текст, попробуйте это

.container { 
    position:relative; 
} 
.center { 
    position:absolute; 
    top:0; left:0; bottom:0; right:0; 
    margin: auto; 
    /* for horiz left-align, try "margin: auto auto auto 0" */ 
}

источник

2016-01-25 09:18:48 NachoDawg

Вы добавили еще один элемент линейного уровня в одну строку с высотой, равной 100% от c ontainer. Чаще всего здесь используется display:inline-block;, но любой элемент линейного уровня, к которому применяется высота, например inline-table, inline-flex или замененный встроенный элемент, будет работать так же хорошо.

e.g div: before {content: ''; Дисплей: встроенный блок; высота: 100%; вертикально-Align: средний; }

html, body { height: 900px; } 
 

 
div { border:1px solid black; height: 12%; } 
 

 
div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

<div> 
 
<i>My text</i> 
 
</div>

источник

2016-01-25 09:57:09 Alohci

Строка-высота и динамическая высота div

ответ

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