Хорошо, так что это довольно сложно объяснить, но в основном я позиционирую заголовок div так, чтобы он был сосредоточен в заголовке div.
Он остается в этом положении на некоторых компьютерах.
Однако на других компьютерах он перескакивает дальше страницы - даже с одинаковыми атрибутами позиционирования. (Это тестируется в том же веб-браузере.)
Я пробовал с абсолютным, относительным и т.д. Позиционированием, все равно не повезло!
Примечание. Этот div содержит текст.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Благодарю!
Привет, трудно понять точно вашу проблему, но я могу дать вам несколько советов, чтобы иметь хороший vertical
и horizontal
центр:
Для горизонтального выравнивания вы можете использовать display:inline-block
если вы хотите, чтобы все div были центрированы:
#header {
text-align:center;
}
#title {
display:inline-block;
}
Для вертикального выравнивания используйте line-height
равную общей height
#header {
line-height:170px;
}
Это работает только для текста одной строки, если вы хотите другой вариант сказать мне
И демо здесь http://jsfiddle.net/8JLzy/7/
редактировать
Чтобы работать с текстом более чем одной строки, вы можете сделать это: сначала ваш html добавьте обертку внутри #title
:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
И в CSS работают с свойством display
:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
Новая демонстрация http://jsfiddle.net/8JLzy/16/
использовать строку-высоту, а не позицию: относительную
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}