У меня есть div, содержащий span, и я хочу, чтобы span выровнялся по вертикали и горизонтали по центру моего div.
Вот скрипка: http://jsfiddle.net/RhNc2/1/
Я пробовал margin:auto на span и vertical-align на div, но это не работает
РЕДАКТИРОВАТЬ: мой div и мой диапазон не имеют фиксированной высоты, это зависит от содержимого, я установил его на скрипке, чтобы показать вам
Выравнивание по вертикали — сложное дело, и я не знаю, есть ли какой-нибудь проверенный способ. Самый надежный метод, доступный за последние пару лет, — это использование макета таблицы CSS. Единственным недостатком этого подхода является то, что он может не работать в устаревших браузерах. Тем не менее, по моему опыту, это, вероятно, лучшее общее решение. Смотрите мой пример ниже:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Вот jsFiddle: http://jsfiddle.net/aGKfd/2/
Есть еще один метод, но он не так надежен, как описанный выше. Он включает в себя два контейнера, для внешнего контейнера задано относительное положение, а для внутреннего — абсолютное. Используя абсолютное позиционирование во внутреннем контейнере, вы можете приблизиться, но для этого требуется некоторая настройка:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Вот jsFiddle: http://jsfiddle.net/6SWPe/
#vertical, а не поле в целом.
- person Ben; 11.11.2011
line-height не является хорошим решением. Когда вы говорите о таком содержании, как «Привет, мир» и о чем-то еще, вас легко одурачить, но как только реальный контент входит в уравнение, line-height сбрасывает огромную бомбу.
- person James Johnson; 11.11.2011
Добавьте это в div CSS:
display:table-cell; text-align:center
рабочая скрипка находится здесь: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Границы для ясности :)
используйте высоту строки = высота: http://jsfiddle.net/RhNc2/8/
Вы также можете просто применить эти стили к содержащему файлу <div>. Решение line-height предполагает, что вам нужна только одна строка текста для центрирования.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
line-height не лучшее решение для вертикального выравнивания. Я знаю, что варианты ограничены, но когда line-height ломается, это действительно ломается.
- person James Johnson; 11.11.2011
Вот
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
И jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Редактировать: поскольку высота вашего div и span зависит от содержимого, мое решение не будет работать, потому что ему нужна фиксированная высота и только одна строка текста. Просто ищите решение с помощью position:absolute.
