Невозможно выровнять динамическое содержимое элемента div по центру - PullRequest
Новая
       14

Невозможно выровнять динамическое содержимое элемента div по центру

0 голосов
/ 06 мая 2018

Я работаю над небольшим счетчиком, который использует flipclock.js

Я проверяю количество уникальных посетителей через каждые две секунды, и если число увеличивается, счетчик увеличиваетсяи переворачиваетРанее я использовал одно значение, которое было извлечено из базы данных при загрузке страницы.Я использовал div, заключенный в центральную метку, например 

<center> 
      <div id= "counter"> <?php echo $count;?</div>
</center>

Значение было прямо в центре div.Но теперь, когда я получаю обновленное количество пользователей через каждые 2 секунды, а также использую flipclock, число не выравнивается по центру.Я могу выровнять статическое число по центру, изменив поля с помощью css, но он не будет хорошо выглядеть, когда число достигает большого значения, например, 10000000. Прямо сейчас после использования flipclock, код 

<div id="counter"  class="flip-clock-wrapper">
    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
        </li>
            <li class="flip-clock-active">
                <a href="#"><div class="up"><div class="shadow"></div><div class="inn">1</div></div><div class="down"><div class="shadow"></div><div class="inn">1</div></div></a>
            </li>
    </ul>

    <ul class="flip  play">
        <li class="flip-clock-before">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">9</div></div><div class="down"><div class="shadow"></div><div class="inn">9</div></div></a>
        </li>

        <li class="flip-clock-active">
            <a href="#"><div class="up"><div class="shadow"></div><div class="inn">0</div></div><div class="down"><div class="shadow"></div><div class="inn">0</div></div></a>
        </li>
    </ul>
</div>

Это выглядиткак enter image description here

Я хочу, чтобы он был в центре независимо от того, насколько велико или мало число.Номер динамический и со временем меняется.

Спасибо!

1 Ответ

0 голосов
/ 06 мая 2018

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

Если вы поместите свой счетчик div в контейнер div, вы можете применить следующий CSS: 

position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

Однако, поскольку он позиционируется как абсолютный, он заберет элемент из потока документов.
В приведенном ниже примере достигается тот же эффект без удаления элемента из потока документов, как вы можете видеть, но он немного сложнее. 

/*
  This becomes the same height as .container but spans the entire document
  so the content is pushed below the .container element.
*/
.container-outer {
  display: block;
  overflow: hidden;
}

/*
  This forcibly aligns its contents to the center of itself.
*/
.container {
  position: relative;
  float: left;
  
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* SAMPLE CONTENT - IGNORE */
.sample {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
}
<div class="container-outer">
  <div class="container">
    <div class="sample"></div>
  </div>
</div>

<!-- As you can see, this sample outside of the container is pushed below the centered element. -->
<div class="sample"></div>

РЕДАКТИРОВАТЬ: CSS-Tricks сделал фантастическое руководство по центрированию, к которому вы можете обратиться:
https://css -tricks.com / центрирования-CSS-полный-гид /

...