Я хочу поместить слово вертикально-выровнять: средний. (Всегда в середине div при масштабировании браузера). Я пробовал много методов, но не смог сохранить его посередине, когда масштабировался. Как я могу это сделать?CSS слово вертикальная шкала
<div class="word">
<h1>Hello!!</h1>
</div>
Вы можете попробовать этот базовый подход:
.word {
height: 90px;
background: #000;
color: #FFF;
line-height: 90px;
}
h1{
font-size:5.9vw;
}<div class="word">
<h1>Hello!!</h1>
</div>ОП просит его находиться в центре, когда браузер масштабируется - это исправлено. –
, если я хочу сделать его горизонтальным выравниванием с правой стороны, как я могу это сделать. Это может быть масштабный текст? потому что у меня есть масштабное изображение рядом с – Kindess
только в теге h1 вам нужно добавить еще один стиль text-align: right; ,Еще один текст с вертикальным выравниванием сделал здесь https://jsfiddle.net/o6k5zese/ –
Я не уверен, что вы хотите, чтобы содержимое было вертикально и горизонтально по центру. Я сделал заметки в CSS.
Вы можете использовать Flexbox:
.word {
height:300px; /* this is just for the example - it can be any height */
display: flex;
align-items: center;
justify-content: center; /* horizontal centering. you can also use flex-start or flex-end */
background:salmon; /* just to help show that it's working. */
}<div class="word">
<h1>Hello!!</h1>
</div>Или, если родительский элемент (ы) имеют определенную высоту, .words может быть процент от этого. Here's a working example in jsFiddle.
html,
body {
/* This is just for the example - use whatever parent element. */
height: 100%;
/* The height doesn't have to be a percentage. */
}
.word {
height: 100%;
/* this is just for the example - it can be any height */
display: flex;
align-items: center;
justify-content: center;
/* horizontal centering. you can also use flex-start or flex-end */
background: salmon;
/* just to help show that it's working. */
}<div class="word">
<h1>Hello!!</h1>
</div>Я хочу шкалу .word div, когда я изменяю размер браузера (потому что у меня есть описание слова с правой стороны и изображение слева). Доля 50% 50% пространства. если я масштабирую броузер, изображение будет уменьшаться, но слово не будет уменьшаться. Как я могу исправить это – Kindess
, ваш вопрос состоял в том, как сохранить текст в центре, когда '.word' был любого размера, а не масштабирования текста. –
Здравствуйте, я стараюсь следующий код и он идеально подходит, как вы хотите, я надеюсь, что это помочь тебе.
.word {
position: relative;
width: 100%;float: left;
height: 90px;
background: #000;
color: #FFF;
line-height: 90px;
}
.word h1{
font-size:5.9vw;
position: absolute;
left: 50%;
top: 50%;
width: auto;
margin: 0px;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}<div class="word">
<h1>Hello!!</h1>
</div>второй метод для этого работать изменить код CSS, как следовать
.word {
position: relative;
width: 100%;
float: left;
height: 90px;
background: #000;
color: #FFF;
line-height: 90px;
display: table;
}
.word h1{
font-size:5.9vw;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Для display:flex, вы также можете использовать margin:auto на дочерний элемент.
.word {
height:300px; /* this is just for the example - it can be any height */
display: flex;
background:salmon; /* just to help show that it's working. */
}
.word h1{
margin:auto;
}<div class="word">
<h1>Hello!!</h1>
</div>
вертикальной Align работы с "дисплей: стол-клетки". вам нужно передать свойство css display в div выше – Tommy
, но если я хочу горизонтально-выровнять: правый и вертикальный-выровнять: средний. Как я могу заставить его работать. – Kindess
вы можете попробовать использовать flex. у вас есть ответ в этом посте. или вы можете добавить в свой ответ свойство text-align-right для этого div. попробуйте это - https://fiddle.jshell.net/5o7vqngs/1/ – Tommy