CODEWITHSUNDEEP
htmlcssdisplay
Basj
Basj

Reputation: 46247

How to align cards horizontally with an equal top border, with CSS?

How to align display: inline-block cards horizontally with an equal top border, with CSS?

enter image description here

Why is there a unequal top boder for each card when you open the following snippet in Full page width? I used a fixed height and width for each .card element so I expected that it would be aligned.

Note: I also tried with display: table-cell but then I lost the fact that it's fluid and that the cards auto-adapt to the browser width (I'd like to keep an automatic number of cards per row, fitting the browser width, without having a horizontal scrollbar).

#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla</p>
    </div>
  </div>
</div>
</div>

Upvotes: 1

Views: 2699

Answers (4)

Bitdom8
Bitdom8

Reputation: 1462

Super easy with flex and grid altogether. Flex is good for self center and adjustment. Grid will help us for the whole page margins and alignment:

.container {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

You can adjust the width and height of the card to fit your needs, and also modify the padding and text alignment as desired.

P.S: Also, if you demand scrollbars to work, don't use flexbox. Change it to grid:

.card {
      display: flex;
     
    }

Here is the coding block. Will be my first time so behold:)

.container {
        display: grid;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .card {
        display: grid;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        background-color: lightblue;
        padding: 20px;
        text-align: center;
    }

    .topnav {
        white-space: nowrap;
        display: grid;
        grid-auto-flow: column;
        overflow-x: scroll;
        width: 20rem;
    }

    .topnav a,
    .topnav button {
        float: left;
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }
<div class="container">
  <div class="twitter-card">
    <p>Here is the card</p>
    <textarea cols="40" rows="10" ></textarea>
    <div class="topnav">
      <button>BIST </button>
      <button>BIST Fav</button>
      <button>EMTIA </button>
      <button>Other</button>
      <button>Other</button>
      <button>Other </button>
      <button>Other </button>
    </div>
  </div>
</div>

Upvotes: 0

Johnson
Johnson

Reputation: 9

You could add vertical-align: middle to your cell class.

.cell { display: inline-block; vertical-align: middle;}

Upvotes: 1

Judz Philip Elicor
Judz Philip Elicor

Reputation: 51

#main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla</p>
    </div>
  </div>
</div>
</div>

Upvotes: 2

Mordor
Mordor

Reputation: 96

do you mean something around these lines ? 

#main { 
 display: flex;
 gap: 40px;
 flex-wrap: wrap;
 width: 100%;
}
.cell { display: inline-block; }
.card { border: 1px solid black; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
    <div id="main">
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla blablabla</p>
            </div>
          </div>
        </div>
        <div class="cell">        
          <div class="card">
            <img src="">
            <div class="container">
              <h4><b>Abc</b></h4>
              <p>blablabla</p>
            </div>
          </div>
        </div>
        </div>

Upvotes: 1

Related Questions