CODEWITHSUNDEEP
cssreactjsstyled-components
javedb
javedb

Reputation: 228

How to center items in a div without losing height of parent?

I have a container div with 2 spans inside it. When I try to align-items: center i lose the height and border-radius of the spans. I'd like them to retain their heights and border radius, while just being centered. How can I do this?

CSS of parent div:

const Container = styled.div`
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
`;

CSS of child span:

const TextContainer = styled.span`
  padding: 8px 11px;
`;

Before align-items: center: enter image description here

After align-items: center: After align center

Upvotes: 2

Views: 1110

Answers (2)

Brian Patterson
Brian Patterson

Reputation: 1625

This is actually due to inline-flex setting a vertical align of baseline.

Removing the align-items would change it to stretch but you probably don't want to do that.

SOLUTION1

What happens if you use align-items: flex-start

SOLUTION2

Or you could try setting the vert align to top, that may fix it. 

const TextContainer = styled.span`
    vertical-align: top;
    padding: 8px 11px;
`;

Can you try those and let me know how it turns out ? Thanks

Upvotes: 1

Vaibhav
Vaibhav

Reputation: 1473

You can add display: flex to span and align items.

.container {
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
}

span {
  display: flex;
  padding: 8px 11px;
  background: #f00;
  align-items: center;
}
<div class="container">
  <span>Match Rank</span>
  <span>
  <img src="https://i.picsum.photos/id/83/60/50.jpg" />
  </span>
</div>

Upvotes: 5

Related Questions