CODEWITHSUNDEEP
htmlcss
abu abu
abu abu

Reputation: 7028

Center align div content responsively

I need to center align div content responsively.

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 9px;
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_inner {
    display: table;
    width: 40%;
    margin: auto;
}

.wpwi_row {
    display: table-row;
    width: 50%; 
}

.wpwi_row > div {
    display: table-cell;
    width: 20%;
}
<div class="wpwi_main">
    <div class="wpwi_top">Top</div>
    <div class="wpwi_outer">
        <div>Outer</div>
    </div>
    <div class="wpwi_inner">
        <div class="wpwi_row">
            <div>Time</div>
            <div>8:02 PM</div>
        </div>
        <div class="wpwi_row">
            <div>Date</div>
            <div>13 Aug 2022</div>
        </div>
        <div class="wpwi_row">
            <div>Pressure</div>
            <div>999 hPa</div>
        </div>
        <div class="wpwi_row">
            <div>Visibility</div>
            <div>10000 Meter</div>
        </div>
        <div class="wpwi_row">
            <div>Cloudiness</div>
            <div>98%</div>
        </div>
        <div class="wpwi_row">
            <div>Sunrise</div>
            <div>5:37 AM</div>
        </div>
        <div class="wpwi_row">
            <div>Sunset</div>
            <div>6:39 PM</div>
        </div>
    </div>
</div>

How can I center align content of wpwi_inner div so that content will remain center aligned if font size increase or decrease ?

Upvotes: 0

Views: 54

Answers (1)

loomy
loomy

Reputation: 361

You probably want to look at flexbox. You can tell flexbox children to be centered on either axis with very little effort and browser support is very strong these days.

.flex{
  display: flex;
  justify-content: center;
 }

.wpwi_main {
    border: 1px solid aliceblue;
    border-radius: 5px;
    font-size: 20px;
}
.wpwi_top {
    text-align: center;
}

.wpwi_outer {
    text-align: center;
    margin: auto;
    padding-bottom: 20px;
    width: 100%;
}

.wpwi_inner {
    display: table;
    width: 40%;
    margin: auto;
}

.wpwi_row {
    display: table-row;
    width: 50%; 
}

.wpwi_row > div {
    display: table-cell;
    width: 20%;
}
<div class="flex-container">
  <div class="wpwi_main">
      <div class="wpwi_top">Top</div>
      <div class="wpwi_outer">
          <div>Outer</div>
      </div>
      <div class="flex">
        <div class="wpwi_inner">
            <div class="wpwi_row">
                <div>Time</div>
                <div>8:02 PM</div>
            </div>
            <div class="wpwi_row">
                <div>Date</div>
                <div>13 Aug 2022</div>
            </div>
            <div class="wpwi_row">
                <div>Pressure</div>
                <div>999 hPa</div>
            </div>
            <div class="wpwi_row">
                <div>Visibility</div>
                <div>10000 Meter</div>
            </div>
            <div class="wpwi_row">
                <div>Cloudiness</div>
                <div>98%</div>
            </div>
            <div class="wpwi_row">
                <div>Sunrise</div>
                <div>5:37 AM</div>
            </div>
            <div class="wpwi_row">
                <div>Sunset</div>
                <div>6:39 PM</div>
            </div>
        </div>
     </div>
  </div>
</div>

In the snippet, I enclosed your wpwi_inner within a div that has display: flex. Using the justify-content property we can make children of the flexbox stay centered on the main axis regardless of the size of the content inside.

Upvotes: 1

Related Questions