CODEWITHSUNDEEP
cssflexbox
Jonathan
Jonathan

Reputation: 11321

How can I vertically center link (button) content with flexbox?

I have a button drawer to the right of some items. The HTML is like this: 

<article class="item">
  <p class="text">Long content</p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article>

I'm arranging them in a column with:

#buttons { 
  display: flex;
  flex-direction: column;
}

Then I'm making them take up the full size of their container with: 

.button { 
  flex: 1;
}

Here's what it looks like so far:

enter image description here

The problem is, the text of each button is aligned with the top of the container, but I want it to be vertically centered in each button, i.e. with the text in the center of each button. Is there a way to do that with flexbox?

Here's the full code:

.item {
  display: flex;
  background-color: #bbb;
}
.text {
  flex: 1;
}
#buttons {
  display: flex;
  flex-direction: column;
  background-color: #ddd;
}
.button {
  flex: 1;
  padding: 1em;
  border: 1px solid #aaa;
  background-color: #eee;
}
<article class="item">
  <p class="text">
    Herp derpsum perp dee derp, mer herderder. Sherp berp derpler, herpem serp tee perper merpus terp dee. Sherpus berps herpsum herpler. Berps herderder herpsum herpderpsmer herp? Derperker der herpler derp derpsum berps perp sherpus. Merpus mer perper derpler perp tee. Berps derpus, derpler ler mer nerpy herpem derp der derps. Terp tee herpsum derpus der nerpy herpderpsmer dee. Merpus derp terp ner sherlamer. Derps herpler serp derpus. Derpler sherlamer derpy sherp sherper, ler dee derps. Ler ner derp herpsum sherp. Ler merpus, derp der derpy derperker perp. Der derpler sherlamer herp mer. Herpler derpus mer, derps ner herpy! Merpus herp, nerpy merp herderder. Ler herpsum derperker herpderpsmer herderder perper sherp. Serp derpler herderder berps. Derpus mer, merp derp herpler. Herpem terp serp derps herpsum sherper.
  </p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article>

Upvotes: 0

Views: 428

Answers (1)

Oriol
Oriol

Reputation: 288080

Currently your buttons are only flex items. You can make them flex containers too:

.button {
  display: flex;       /* Magic begins */
  align-items: center; /* Center contents vertically */
}


.item {
  display: flex;
  background-color: #bbb;
}
.text {
  flex: 1;
}
#buttons {
  display: flex;
  flex-direction: column;
  background-color: #ddd;
}
.button {
  flex: 1;
  padding: 1em;
  border: 1px solid #aaa;
  background-color: #eee;
  display: flex;       /* Magic begins */
  align-items: center; /* Center contents vertically */
}
<article class="item">
  <p class="text">
    Herp derpsum perp dee derp, mer herderder. Sherp berp derpler, herpem serp tee perper merpus terp dee. Sherpus berps herpsum herpler. Berps herderder herpsum herpderpsmer herp? Derperker der herpler derp derpsum berps perp sherpus. Merpus mer perper derpler perp tee. Berps derpus, derpler ler mer nerpy herpem derp der derps. Terp tee herpsum derpus der nerpy herpderpsmer dee. Merpus derp terp ner sherlamer. Derps herpler serp derpus. Derpler sherlamer derpy sherp sherper, ler dee derps. Ler ner derp herpsum sherp. Ler merpus, derp der derpy derperker perp. Der derpler sherlamer herp mer. Herpler derpus mer, derps ner herpy! Merpus herp, nerpy merp herderder. Ler herpsum derperker herpderpsmer herderder perper sherp. Serp derpler herderder berps. Derpus mer, merp derp herpler. Herpem terp serp derps herpsum sherper.
  </p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article>

Upvotes: 4

Related Questions