Як центрувати текст горизонтально в розкладці flexbox

7 Березня 2024 в 19:15 43

При розробці веб-сайтів однією з найпоширеніших задач є центрування контенту. Зокрема, вирівнювання тексту по центру горизонтально може стати непростим завданням, особливо коли використовується розкладка flexbox. У цій статті ми розглянемо, як досягти цієї мети за допомогою HTML, CSS та модуля flexbox.

Перед нами стоїть завдання створити макет, в якому поточний час, температура, альтернативне місто та прогнози відображаються видатно. Нам необхідно, щоб текст був вирівняний горизонтально всередині контейнера flex, який повністю заповнює вікно браузера клієнта.

У нас виникає проблема з горизонтальним вирівнюванням тексту в розкладці flex. Незважаючи на спроби використання властивостей align-items та justify-content, текст завжди вирівнюється зліва.

Розглянемо надану початкову верстку, яка використовує контейнер flex з класом .box, що містить дві основні секції: time_temp_container та extras. Секція time_temp_container містить елементи, що стосуються часу, температури та міста, тоді як extras містить додаткові дані прогнозу.

<div class='box' height:100%>
  <div id='time_temp_container' style='flex-flow: column nowrap;flex-grow: 1; font-size:30pt;align-items:center;'>
    <div id='time' name='time' style='font-size:85pt;'>
      07:58
    </div><!-- time -->
    <div id='temp' name='temp' style='font-size:70pt;'>
      47F 8C
    </div><!-- temp -->
    <div id='city' name='city' style='font-size:40pt;'>
      SH 20:58 33F 1C
    </div><!-- city -->
  </div><!-- time_temp_container -->
  <div id='extras' name='extras' style='flex_flow: column nowrap;'>
    <div id='icon' name='icon'>icon</div>
    <div>08:00 76F</div>
    <div>09:00 78F</div>
    <div>10:00 80F</div>
    <div>11:00 81F</div>
    <div>12:00 82F</div>
    <div>13:00 82F</div>
    <div>14:00 83F</div>
    <div>15:00 82F</div>
    <div>16:00 83F</div>
  </div><!-- extras -->
</div><!-- outer box -->

07:58

</div>

47F 8C

</div>

SH 20:58 33F 1C

</div>

</div>

</div>

</div>

Щоб вирішити проблему з горизонтальним вирівнюванням, спробуйте видалити властивість align-items: center; зі стилю секції time_temp_container. Ця властивість зараз центрує елементи вздовж поперечної вісі (вертикально), що не є необхідним для горизонтального вирівнювання.

Після внесення цієї зміни текст має вирівнятися горизонтально всередині контейнера flex, досягнувши бажаного макету.

Якщо у вас виникають додаткові питання або пропозиції щодо поліпшення, будь ласка, діліться ними. Flexbox, безумовно, є потужним інструментом для розмітки, але завжди корисно досліджувати альтернативні підходи, якщо потрібно.