CODEWITHSUNDEEP
htmlcssflexbox
Nico A
Nico A

Reputation: 227

Aligning text vertically in opposite direction of flexbox

I have a horizontal flexbox containing two divs, and want to center the text in one of them vertically.

Here is a toy example of what I mean. I'm not sure how it's currently choosing to align the text, but I want it such that if you change the height of post_title to 1000px, the title itself jumps down the page (i.e, stays vertically centered within the div).

Other solutions have told me to change the direction of the flexbox, which messes up the whole thing, or to use align-items or justify-items which seem both to do absolutely nothing. I do not want the text horizontally centered.

How can I simply center this title vertically?

Upvotes: 2

Views: 285

Answers (2)

TheHypeRocket
TheHypeRocket

Reputation: 11

In the div.post h3 {} add 

   margin: 0;
   position: relative;
   top: 50%;
   transform: translateY(-50%);

This is how you can align any element vertically within another element.

Upvotes: 0

Matt Davis
Matt Davis

Reputation: 1337

The align-self property is what you would be looking for. I have added a working example below.

Example:

.post {
  border: 1px solid #333333;
  display: flex;
}

.post_title {
  align-self: center; /* Center title vertically */
  width: 400px;
}

.post_desc {
  font-size: 10px;
}
<div class="post">
  <div class="post_title">
    <h3 title="{{ post.title }}">
      Test
    </h3>
  </div>
  <div class="post_desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel purus laoreet mi faucibus tempor. Maecenas id venenatis odio. Integer porttitor neque ut lorem lacinia tincidunt. Sed metus neque, elementum vitae condimentum vel, volutpat sed dui. Nulla euismod tempus ullamcorper. Phasellus aliquet nisi eu odio viverra, eu consectetur ex consequat. Nam gravida finibus ante, in ultrices erat finibus a. Maecenas porttitor tristique elit, non interdum mauris commodo ac.
    </p>
  </div>
</div>

Upvotes: 3

Related Questions