как центрировать гибкий дочерний элемент по горизонтали, который содержит текст в flexbox? - PullRequest
Новая
       6

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

0 голосов
/ 07 мая 2020

как я могу центрировать дочерний элемент гибкости, содержащий текст? Я пробовал использовать justify-content, но все равно это не работает, я думаю, что длина текста разная для каждого ребенка, поэтому не работает, как их исправить? 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

   .state-container{
                text-align: center;
                height: 40px;
                width: 50%;
                margin: auto;
                padding: 0.3rem;
               background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url("https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80");
               background-repeat: no-repeat;
               background-size: auto;
               background-position: center; 
               border-radius: 5px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               color: white;
               margin-bottom: 0.2rem;
              }
   
</style>
</head>
<body>

  <div class="state-container">
        <b>Andaman and Nicobar Islands</b>          
          <p>1</p>
        <p>0</p>
       <p>32</p>
        <p>33</p>             
   </div> 

  <div class="state-container">
        <b>Dadra and Nagar Haveli and Daman and Diu</b>          
          <p>0</p>
        <p>0</p>
       <p>0</p>
        <p>0</p>             
   </div>   <div class="state-container">
        <b>Assam</b>          
          <p>12</p>
        <p>1</p>
       <p>32</p>
        <p>45</p>             
   </div> 
</body>
</html>

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Это явно table, так почему бы не использовать его? Или хотя бы CSS Таблицы 

.state-container {
  text-align: center;
  height: 40px;
  width:100%;
  padding: 0.3rem;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.7)
    ),
    url("https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  border-radius: 5px;
  display: table-row;;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin-bottom: 0.2rem;
}

.state-container * {
  display:table-cell;
  padding:.5em;
}
  <div class="state-container">
        <b>Andaman and Nicobar Islands</b>          
          <p>1</p>
        <p>0</p>
       <p>32</p>
        <p>33</p>             
   </div> 

  <div class="state-container">
        <b>Dadra and Nagar Haveli and Daman and Diu</b>          
          <p>0</p>
        <p>0</p>
       <p>0</p>
        <p>0</p>             
   </div>   <div class="state-container">
        <b>Assam</b>          
          <p>12</p>
        <p>1</p>
       <p>32</p>
        <p>45</p>             
   </div>
0 голосов
/ 07 мая 2020
  1. Добавлен селектор для обработки ширины внутренних элементов.
  2. Изменено с space-between на center, так как центр - это то, что вам нужно, но я чувствую, что вы можете иметь text-align:left; для класса .title. 

.state-container {
  text-align: center;
  height: 40px;
  width: 50%;
  margin: auto;
  padding: 0.3rem;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin-bottom: 0.2rem;
}

.title {
  width: 60%;
  text-align:left;
}

.first,
.second,
.third,
.fourth {
  width: 10%;
}
<body>

  <div class="state-container">
    <b class="title">Andaman and Nicobar Islands</b>
    <p class="first">1</p>
    <p class="second">0</p>
    <p class="third">32</p>
    <p class="fourth">33</p>
  </div>

  <div class="state-container">
    <b class="title">Dadra and Nagar Haveli and Daman and Diu</b>
    <p class="first">0</p>
    <p class="second">0</p>
    <p class="third">0</p>
    <p class="fourth">0</p>
  </div>
  <div class="state-container">
    <b class="title">Assam</b>
    <p class="first">12</p>
    <p class="second">1</p>
    <p class="third">32</p>
    <p class="fourth">45</p>
  </div>
</body>
...