Search code examples
htmlcssrowcenterw3.css

W3 CSS : Center Cards within Row

I am working within the W3.CSS framework and trying to center two Cards as seen in the following image.

enter image description here

When the viewport is large or medium sized, I would like the cards to sit adjacent to one another. On small viewports, I would like for them to stack one on top of the other. Anyway, try as I might, I just cannot achieve this layout. I am either able to get the cards to sit adjacent to one another, but they will not center within the row, or I get them to be centered, but they stack on top of each other regardless of the size of the viewport.

Here is some sample code as a starting point.

 <div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>

I have tried so many different approaches to achieve the desired structure using Grid, Layout and Display controls, but NOTHING has worked.

Thanks in advance for tips or a solution.

Solution

  • Here's a pretty basic way of doing it by setting them to inline-block and also setting them to have a min-width in px so they will truncate down when the screen gets small. Here's the jsfiddle to play with: https://jsfiddle.net/trw530q1/

    .w3-card {
  display: inline-block;
  background-color: blue;
  min-width: 200px;
}

.w3-gray {
  text-align: center;
}
    <div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>