Я пытаюсь сделать небольшое окно ввода имени пользователя и пароля.
Я хотел бы спросить, как вы вертикально выровняете div?
У меня есть:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
Как я могу сделать div с идентификатором Username и формой, чтобы вертикально выровнять себя по центру? Я попытался поставить:
vertical-align: middle;
в CSS для div с id Login, но он не работает. Любая помощь будет оценена.
Лучший подход в современных браузерах - использовать flexbox:
#Login {
display: flex;
align-items: center;
}
Некоторым браузерам понадобятся префиксы поставщиков. Для старых браузеров без поддержки flexbox (например, IE 9 и ниже) вам необходимо реализовать резервное решение, используя один из более старых методов.
Рекомендуемое чтение
Вы можете вертикально выровнять div в другом div. См. этот пример в JSFiddle или рассмотрите пример ниже.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
Маркер .innerDiv должен быть в таком формате: margin: auto *px;
[Где * - ваше желаемое значение.]
display: inline-flex поддерживается в последних (обновленных/текущих версиях) браузерах с поддержкой HTML5.
Возможно, он не работает в Internet Explorer: P:)
Всегда пытайтесь определить высоту для любого вертикально выровненного div (т.е. innerDiv) для противодействия проблемам совместимости.
Это можно сделать с помощью 3 строк CSS и совместимо с (и в том числе) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Пример: http://jsfiddle.net/cas07zq8/
Если вы знаете высоту, вы можете использовать абсолютное позиционирование с отрицательным margin-top следующим образом:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
В противном случае нет реального способа вертикально центрировать div только с CSS
Я очень опаздываю на вечеринку, но я придумал это сам, и это один из моих любимых быстрых хаков для вертикального выравнивания. Это безумно просто и легко понять, что происходит.
Вы используете атрибут :before css, чтобы вставить div в начало родительского div, дать ему display:inline-block и vertical-align:middle, а затем предоставить те же свойства дочернему div. Поскольку vertical-align для выравнивания вдоль строки, те встроенные divs будут считаться линией.
Сделайте :before div height:100%, и дочерний div будет автоматически следовать и выровнять по середине очень высокой "линии".
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Вот скрипка, чтобы продемонстрировать, о чем я говорю. Детский div может быть любой высоты, и вам никогда не придется изменять его поля /paddings.
И здесь более пояснительная скрипка.
Если вы не любите :before, вы всегда можете вручную добавить div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
А затем просто переназначьте .parent:before на .parent .before
Я нашел этот сайт полезным: http://www.vanseodesign.com/css/vertical-centering/ Это сработало для меня:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
@комментарий GáborNagy еще одно сообщение было самым простым решением, которое я мог найти и работал как прелесть для меня, так как он привел jsfiddle, я копирую его здесь с помощью небольшое дополнение:
CSS
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
Если вы хотите также выровнять его по горизонтали, вам нужно добавить еще одну "внутреннюю ячейку" div внутри "cell" div и присвоить ей этот стиль:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Вертикальное выравнивание всегда было сложным.
Здесь я прикрыл некоторый метод вертикального выравнивания div.
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
Если выровненный div не имеет фиксированной высоты, попробуйте использовать следующий CSS для выровненного div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
В моем firefox и chrome это:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
если вы используете фикс высоты высоты, чем вы можете использовать padding-top в соответствии с вашими потребностями дизайна. или вы можете использовать верх: 50%. если мы используем div, чем вертикальное выравнивание, не работает, поэтому мы используем верхнюю часть или позицию по потребности.
Я нашел способ, который отлично подходит для меня. Следующий script вставляет невидимое изображение (то же, что и bgcolor или прозрачный gif) с высотой, равной половине размера пробела на экране. Эффект - идеальное вертикальное выравнивание.
Скажите, что у вас есть заголовок div (height = 100) и div нижнего колонтитула (высота = 50), а содержание в главном div, которое вы хотите выровнять, имеет высоту 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
Вы помещаете script непосредственно перед содержимым, которое вы хотите выровнять!
В моем случае содержание, которое мне нравилось выравнивать, было изображение (ширина = 95%) с соотношением сторон 100: 85 (ширина: высота). Средняя высота изображения составляет 85% от его ширины. Ширина составляет 95% от ширины экрана.
Поэтому я использовал:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Объедините этот script с
<body onResize="window.location.href = window.location.href;">
и вы получите ровное вертикальное выравнивание.
Надеюсь, это сработает и для вас!
Мне нужно было указать min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
попробуйте этот?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
надеюсь, что это поможет
divs не могут быть выровнены по вертикали таким образом, однако вы можете использовать поля или позицию: относительно изменения его местоположения.