CODEWITHSUNDEEP
css
moondc
moondc

Reputation: 402

CSS - How to set element height to that of sibling

The question may not be 100% accurate with what I need, googling css is difficult because I don't know what to call things.

Here's my situation. I need a container with two children. One of those children should be a vertically centered icon and the other child should be wrappable text. Here's the exact mockup. enter image description here
If the screen size expands or shrinks then the text should start wrapping but the icon should remain vertically centered and not let the text wrap under it.
Here's my incorrect solution that has the text wrapping under it.
enter image description here

Here's the incorrect html and css that's important

<div class="container">
  <span class="child">
    <i class="icon"></i>
  </span>
  <span class="child">Something's not quite right.....
  </span>
</div>

.container{
  display: block;
}

.child{

}

Upvotes: 1

Views: 1078

Answers (1)

Nils K&#228;hler
Nils K&#228;hler

Reputation: 3001

I guess what you are trying to achieve is getting your elements vertically aligned, making your icon center the box. Even if you get the height of your siblings to match, it's hard to vertically align elements.

What you are looking for is flexbox to handle your problem, doing something like this instead. This will make the container align the two child, and center the elements, that way the css handles the vertical aligment for you.

body {
  background: lightgray;
}
.icon {
  height: 20px;
  padding: 10px;
}
.container {
  background: white;
  border-radius: 5px;
  border: 1px solid red;
  
  display: flex;
  align-items: center;
}
<div class="container">
  <span class="child">
    <img class="icon" src="https://www.freeiconspng.com/thumbs/error-icon/error-icon-32.png" />
  </span>
  <span class="child">Something's not quite right. <br/> Please try again later. If this is your second try, please give us a call, and we can help you make the payment.
  </span>
</div>

Upvotes: 2

Related Questions