Div продолжает перемещаться вниз по странице при открытии на разных компьютерах

Question

Div продолжает перемещаться вниз по странице при открытии на разных компьютерах

0

Хорошо, так что это довольно сложно объяснить, но в основном я позиционирую заголовок div так, чтобы он был сосредоточен в заголовке div.

Он остается в этом положении на некоторых компьютерах.

Однако на других компьютерах он перескакивает дальше страницы - даже с одинаковыми атрибутами позиционирования. (Это тестируется в том же веб-браузере.)

Я пробовал с абсолютным, относительным и т.д. Позиционированием, все равно не повезло!

Примечание. Этот div содержит текст.

CSS:

#header {
    position:relative;
    height:170px;
    background-color: #30A7BF;
    margin:0px auto;
    padding: 1px;
}

#title {
    position: relative;
    top: -20px;
    left: 315px;
}

Благодарю!

Tom 29 нояб. 2013, в 22:01

Источник

0

что вы подразумеваете под компьютерами? разные браузеры? другое разрешение экрана?
Nikitas 29 нояб. 2013, в 20:27
0

@Nikitas Тот же браузер (IE), но да, экраны имеют разное разрешение.
Tom 29 нояб. 2013, в 20:30

Теги:

html

css

position

css-position

2 ответа

0

использовать строку-высоту, а не позицию: относительную

#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;

}

Hrvoje Golcic 29 нояб. 2013, в 17:46

0

это не работает, потому что в div есть два отдельных абзаца, и этот атрибут просто изменяет пространство между ними.
Tom 29 нояб. 2013, в 20:26
0

Тогда просто используйте padding-top вместо line-height, но, возможно, не используйте position: для такой тривиальной задачи
Hrvoje Golcic 29 нояб. 2013, в 20:34

Ещё вопросы

что вы подразумеваете под компьютерами? разные браузеры? другое разрешение экрана?
@Nikitas Тот же браузер (IE), но да, экраны имеют разное разрешение.
это не работает, потому что в div есть два отдельных абзаца, и этот атрибут просто изменяет пространство между ними.
Тогда просто используйте padding-top вместо line-height, но, возможно, не используйте position: для такой тривиальной задачи

DaniP · Accepted Answer · 2013-11-29T19-20-00.000Z

Привет, трудно понять точно вашу проблему, но я могу дать вам несколько советов, чтобы иметь хороший 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/

Внутри этого div есть две строки текста. Это вертикальное выравнивание, которое имеет значение. В основном проблема заключается в том, что div отлично позиционируется на одном компьютере, но затем на другом он будет больше перемещаться по странице.
@ user3042712 Проверьте ответ редактирования