CODEWITHSUNDEEP
htmlcssflexbox
user9116815
user9116815

Reputation: 43

how to center flex child horizontally which contains text in flexbox?

how can i center the flex child which contains the text? i tried using justify-content but still it doesn't work, i think the length of the text is different for each child that's why it doesn't work how to fix them?

<!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>

Upvotes: 0

Views: 47

Answers (2)

Paulie_D
Paulie_D

Reputation: 115061

This is clearly a table so why not use one? Or at least CSS Tables 

.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>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7064

  1. Added selector to handle the width of inner elements.
  2. Changed from space-between to center, since center is what you need, but I feel you can have text-align:left; for the .title class.

.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>

Upvotes: 0

Related Questions