Горизонтально центр Emoji внутри абсолютного Div - PullRequest
Новая
       9

Горизонтально центр Emoji внутри абсолютного Div

1 голос
/ 10 марта 2019

Я создаю игру, которая размещает эмодзи в различных координатах на веб-странице.Иногда эмодзи больше контейнера, в котором он находится. Например, вот HTML, который помещает дом с размером шрифта 100 пикселей в контейнер 50 пикселей. 

    div.emoji-container {
        position: absolute;
        left: 200px;
        top: 200px;
        width: 50px;
        height: 50px;
        background-color: red;
    }
    div.emoji {
        position: relative;
        font-size: 100px;
        line-height: 100px;
    }
    <div class="emoji-container">
    	<div class="emoji">&#x1F3E0;</div>
    </div>

Вот скрипка .

Как видите, смайлики не центрированы на красном квадрате.

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

Другими словами, если ширина смайликов100px, а контейнер 50px, то эмодзи должно выступать из контейнера на 25px с обеих сторон.

Часть проблемы заключается в том, что emoji с размером шрифта 100px имеет разную ширину на Mac, Windows, Andriod,и так далее.На Mac ширина составляет 100px, а в Windows - около 113px.

Если решения css не существует, я знаю, что могу использовать решение JavaScript.

1 Ответ

2 голосов
/ 10 марта 2019

Вы можете использовать flexbox для этого. Для демонстрации я добавил прозрачность к эмодзи, чтобы показать его центральное положение. На вершине CSS находится custom property, который вы можете изменить, чтобы протестировать разные размеры.

https://jsfiddle.net/uvf2h0sj/

Для вас важно, чтобы оба элемента (родительский и дочерний) использовали следующий CSS для центрирования всего (вертикального и горизонтального): 

display: flex;
justify-content: center;
align-items: center;


:root {
  --size: 100px;
}

body {
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
}

div.emoji-container {
  width: 50px;
  height: 50px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.emoji {
  font-size: var(--size);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="emoji-container">
  <div class="emoji">&#x1F3E0;</div>
</div>
...