Unable to vertically centre text even after trying various methods

Question

I am trying to centre text (a Link) inside of a div. I am capable of getting it to centre horizontally, but not vertically. I have tried many methods and the vertical position of the text never changes. Padding-top and other similar methods just increase the white box size, and don't effect the text.

HTML
----------
<div className={styles.buttonBorder}>
  <Link to={`/event/${id}`} className={styles.link}>Details</Link>
</div>

CSS
----------
.buttonBorder {
  display: flex;
  align-items: center;
  height: 50px;
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
}

.link,
.link:visited,
link:link,
link:active {
  background: white;
  text-decoration: none;
  color: black;
  text-align: center;
  font-size: 18pt;
  border: 0;
  width: 150px;
  height: 50px;
  cursor: pointer;
  transition-duration: 0.4s;
  border: 1px solid black;
}

.link:hover {
  background: transparent;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

score 3 · Accepted Answer · answered Oct 13 '20 at 06:36

3

Add below style in .link class

display:flex;
justify-content: center;
align-items: center;

answered Oct 13 '20 at 06:36

Rohitha

776
3
8

I'm an idiot. Thanks, it worked a charm – Kyle Sharp Oct 13 '20 at 06:38
In my thoughts - "When centering elements haunts you like a ghost, flexbox will help you the most." – Praneet Dixit Oct 13 '20 at 07:19

score 0 · Answer 2 · answered Oct 13 '20 at 06:42

Set the line-height of the link to be the same as the height.

.buttonBorder {
  display: flex;
  align-items: center;
  height: 50px;
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient( 90deg, rgba(148, 88, 199, 1) 0%, rgba(92, 62, 183, 1) 100%);
  background: linear-gradient( 90deg, rgba(148, 88, 199, 1) 0%, rgba(92, 62, 183, 1) 100%);
}

.link {
  background: white;
  text-decoration: none;
  color: black;
  text-align: center;
  font-size: 18pt;
  border: 0;
  width: 150px;
  height: 50px;
  line-height: 50px; /* add this line */
  cursor: pointer;
  transition-duration: 0.4s;
  border: 1px solid black;
}

.link:hover {
  background: transparent;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

<div class="buttonBorder">
  <div class="link">Details</div>
</div>

Unable to vertically centre text even after trying various methods

2 Answers2