Элемент не будет оставаться в центре, особенно при изменении размера экрана

Question

Моя проблема в том, что я не могу горизонтально центрировать треугольный указатель.

Ну, я могу центрировать указатель для некоторых размеров окна, но когда я сужаю или расширяю окно, оно снова помещает его в неправильное место.

Что мне не хватает?

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: 48%;
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

<div class="container container-decor">great distance</div>

Answer 1

Ваша стрелка сосредоточена с left:48%, Это позиционирует стрелку рядом с центром контейнера на основе левого края элемента стрелки.

Другими словами, предположим, что вы использовали left:50% (это правильный путь), это не центрирует элемент стрелки в контейнере. Это фактически центрирует левый край элемента в контейнере.

На изображении ниже маркер центрируется на странице с помощью text-align:center,

Для сравнения, смотрите стрелку в центре с left:50%,

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

В результате обычно центрированные, абсолютно позиционированные элементы используют transform имущество:

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

transform Правило говорит треугольнику смещаться назад на 50% его ширины. Это делает его идеально сосредоточенным на линии. Теперь он подражает text-align:center,

В translate(-50%,0) первое значение нацелено на ось x (горизонтальная), другое - на ось y. Эквивалентное правило будет transform:translateX(-50%) (есть также transform:translateY()).

Кроме того, вот как центрировать элемент по горизонтали и вертикали, используя этот метод:

.triangle {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

Примечание: если вы использовали right: 50% или же bottom: 50% соответствующие translate значения будут 50% (не отрицательно).

В этом конкретном вопросе, однако, возникает проблема, потому что transform:rotate(45deg) также находится в блоке объявлений. Добавление второго transform означает, что первый игнорируется (согласно каскаду).

Итак, в качестве решения, попробуйте это:

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

Объединяя функции воедино, можно применять несколько функций.

Просто отметьте, что порядок имеет значение. Если translate а также rotate Если повернуть вспять, треугольник сначала повернет на 45 градусов, а затем сместится на -50% вдоль повернутой оси, нарушив компоновку. Поэтому убедитесь, что translate идет первым (Спасибо Oriol за то, что указал на это в комментариях.)

Вот полный код:

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

<div class="container container-decor">great distance</div>

jsFiddle

Answer 2

Вы могли бы потенциально использовать новый CSS3 calc() функция, которая позволяет делать арифметику, чтобы выяснить центральную точку.

Чтобы получить центральную точку, расчет должен быть:

50% - (56px / 2)

Так что это в конечном итоге

50% - 28px

Положив это в calc() Затем функция должна выяснить это в браузере и расположить идеально в центре.

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: calc(50% - 28px);
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

<div class="container container-decor">great distance</div>