Question 43951 in Html Question posted in
Some basic documentation can be found here.

Can't center a text in a card with two parts – Html

I have a card with two parts.

  • One part with a pic

  • another part with a text

My image take 80% of the card and the other part for text 20%.

I could like to vertical align the text then define padding.

I would like this :

enter image description here

And i currently have this :

enter image description here

I tried few things

`vertical-align: baseline;

/* */

align-item:flex-start;

/* */

display: flex;
justify-content: flex-start;
align-item: center.`

My current code is :

HTML:

<div class="card">
              <img
                src=".#.jpg"
                alt="#"
              />
              <div class="card-h3">
                <h3>Parc national des Calangues</h3>
              </div>
</div>

CSS:

.card img {
    width: 100%;
    height: 80%;
    object-fit: cover;
}

.card-h3{
    display: flex;
    vertical-align: baseline;
}
Tags:

3

Answers


  1. 0 
    .card-h3 {
    display: flex;
    align-items: center; // for vertical centering
    margin: auto; // for horizontal centering
}
    Login or Signup to reply.
  2. 0

    This is a great use case for grid because it allows you to control the layout in two directions.

    * {
  box-sizing: border-box;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: 4fr 1fr; /* same as 80/20 */
  align-items: center; /* makes the titles center vertically */
  
  border: 1px solid #ccc;
  border-radius: 2rem;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: 100%; /* fill the space */
  object-fit: cover;
}

.card-h3 {
  padding: 1rem;
}
    <div class="card-grid">
  <div class="card">
    <img
      src="https://picsum.photos/id/237/600"
      alt=""
    />
    <div class="card-h3">
      <h3>Some people claim that dogs are better than cats — other people disagree</h3>
    </div>
  </div>


  <div class="card">
    <img
      src="https://picsum.photos/id/239/800/600"
      alt=""
    />
    <div class="card-h3">
      <h3>Allergies are here</h3>
    </div>
  </div>
  
  <div class="card">
    <img
      src="https://picsum.photos/id/6/900/600"
      alt=""
    />
    <div class="card-h3">
      <h3>How to turn off a computer</h3>
    </div>    
  </div>
  
    <div class="card">
    <img
      src="https://picsum.photos/id/23/600"
      alt=""
    />
    <div class="card-h3">
      <h3>What it means to fork your code<br/>Hint: it has nothing to do with these</h3>
    </div>    
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Simply add some padding:

    .card-h3 {
  padding: 2rem 1rem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search