Элемент позиции в середине экрана с использованием CSS

После завершения моего веб-сайта каждый день я пытаюсь изменить то, что сделает его более отзывчивым. Это сделано в Muse, поэтому не ожидайте большей части "отзывчивости".

У меня есть элемент с этим классом:

#labelstrong
 {
    z-index: 17;
    width: 633px;
    background-color: transparent;
    color: #FFFFFF;
    text-align: justify;
    position: fixed;
    top: 1542px;
    left: 164px;
 } 

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

ОБНОВЛЕНИЕ: Проблема (и я забыл упомянуть об этом), что позиция должна быть исправлена, поскольку существует горизонтальная функция прокрутки для всех элементов (они идут справа от экрана), и поэтому они должны находиться в фиксированном положении.

ОБНОВЛЕНИЕ 2: Вот живой пример. Представьте, что класс применяется к каждой TAG (конечно, не к меню).

http://2323029s8s8s8.businesscatalyst.com/index.html

0
24 янв. '15 в 22:00
источник поделиться
5 ответов

Вы можете добавить для этих больших тегов следующие css:

.fixed-big-tag{
   top: 50%;
   transform: translateY(-50%);
}

Также как счетчик, убедитесь, что <body> и <html> имеют 100% высоты

Другая идея заключалась бы в использовании !important правила для top property чтобы перезаписать то, что Muse выводит (или любое правило, которое необходимо перезаписать)

Если это сработает, возможно, вы можете добавить новый класс во все эти теги, которые должны быть центрированы и перезаписать его с помощью css

Проверьте это и дайте мне знать, как это происходит.

+1
24 янв. '15 в 22:40
источник

См. Этот ресурс для методов центрирования элементов с помощью CSS: центрирование в CSS: полное руководство

Если вы создаете элемент родительского контейнера с относительно позиционированием, вы можете легко центрировать ваш дочерний элемент:

.parent {
  position: relative;
}

#labelstrong {
  z-index: 17;
  background-color: transparent;
  color: #FFFFFF;
  text-align: justify;
  position: absolute;

  width: 634px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -317px;
}

Обратите внимание, что смещения margin составляют половину ширины и высоты.

+1
24 янв. '15 в 22:07
источник

Попробуйте использовать проценты вместо пикселей, например:

top: 10%;

Если вы хотите горизонтально центрировать, попробуйте установить маржу в auto:

margin: 0 auto;

Ваш код будет выглядеть так:

#labelstrong {
    z-index: 17;
     width: 633px;
     background-color: transparent;
     color: #FFFFFF;
     text-align: justify;
     position: relative;
     top: 10%;
     margin: 0 auto;
}

Взгляните на этот пример: http://jsfiddle.net/5a6fyb21/

0
24 янв. '15 в 22:12
источник

jQuery будет вашим лучшим выбором.

Я бы просто установил ваш класс на фиксированную позицию, а затем попытался использовать следующее.

$(window).resize(function() {    
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});

Функция изменения размера используется так, чтобы она оставалась в положении, если размер окна изменился.

0
24 янв. '15 в 22:19
источник

Центрированная метка над горизонтально прокручиваемым контентом:

http://jsfiddle.net/cqztf9kc/

.fixed {
    margin: 50%;
    position: fixed;
    z-index: 1;
}

.content {
    x-overflow: scroll;
    height: 100%;
}
0
24 янв. '15 в 22:19
источник

Посмотрите другие вопросы по меткам или Задайте вопрос