HTML/CSS - Dealing With Contents That Refuse To Vertically Center-CodePudding

I've been messing with a bunch of code that refuses to center within my divs that are floated left and right. For my left one, a span and an image are stuck in the bottom left, while on the right, normal text is stuck on the top-right.

Here's what it currently looks like.

As for my code, here it is. If I can get help on what I could maybe do to fix it, I'd appreicate it.

HTML:

<div class="header">
    <div class="allSelector">
        <!-- <span (click)="showAll()"><img src={{imgSource}} /> {{expandContractStatement}}</span> -->
        <img src={{imgSource}} (click)="showAll()"/><span (click)="showAll()" class="selectorInsides">{{expandContractStatement}}</span>
    </div>
    <div class="legend">
        Incidents
        Tasks
        CRs
        Problems
    </div>
</div>

CSS:

.header {
    background-color: gray;
    color:black;
    font-size: 24pt;
    line-height: 24pt;
    height: 6%;
    max-height: 6%;
    overflow: hidden;
    vertical-align: middle;
}
.allSelector {
    width: 50%;
    max-height: 100%;
    height: 100%;
    float: left;}
.selectorInsides { /*Threw this in because of some issues before*/
    overflow: hidden;
}
.allSelector > img {
    height: 80%;
    object-fit: contain;
}
.legend {
    line-height: 24pt;
    max-height: 100%;
    height: 100%;
    width: 50%;
    float: right;
    margin: 0;
    text-align: right;
    vertical-align: middle;
}

CodePudding user response：

It's always better to deal with your boxes with flex system which provides more alignment flexibility.

To Achieve this update your CSS with the following code

.header {
  background-color: gray;
  color: black;
  font-size: 24pt;
  line-height: 24pt;
  height: 6%;
  max-height: 6%;
  overflow: hidden;
  vertical-align: middle;
  padding: 10px;
}
.allSelector {
  width: 50%;
  max-height: 100%;
  height: 100%;
  float: left;
  display: flex;
}
.selectorInsides { /*Threw this in because of some issues before*/
  overflow: hidden;
}
.allSelector > img {
  height: 80%;
  object-fit: contain;
}
.legend {
  line-height: 24pt;
  max-height: 100%;
  height: 100%;
  width: 50%;
  float: right;
  margin: 0;
  text-align: right;
  vertical-align: middle;
}

Enjoy!

CodePudding user response：

It's hard to tell if this answer is sufficient since a minimal, reproducible example wasn't provided, but you use Flexbox to vertically align elements.

/* Vertically align elements */
.header,
.allSelector {
  display: flex;
  align-items: center;
}

.selectorInsides { 
  /* Adjust the spacing between image and text as needed */
  margin-left: 8pt;
}

/* Vertically align elements */
.header,
.allSelector {
  display: flex;
  align-items: center;
}

.header {
  background-color: gray;
  color: black;
  font-size: 24pt;
  line-height: 24pt;
  height: 6%;
  max-height: 6%;
  overflow: hidden;
  vertical-align: middle;
}

.allSelector {
  width: 50%;
  max-height: 100%;
  height: 100%;
  float: left;
}

.selectorInsides {
  /*Threw this in because of some issues before*/
  overflow: hidden;
  
  /* Adjust the spacing between image and text as needed */
  margin-left: 8pt;
}

.allSelector>img {
  height: 80%;
  object-fit: contain;
}

.legend {
  line-height: 24pt;
  max-height: 100%;
  height: 100%;
  width: 50%;
  float: right;
  margin: 0;
  text-align: right;
  vertical-align: middle;
}

<div class="header">
  <div class="allSelector">
    <!-- <span (click)="showAll()"><img src={{imgSource}} /> {{expandContractStatement}}</span> -->
    <img src="https://via.placeholder.com/32" (click)="showAll()" /><span (click)="showAll()" class="selectorInsides">Expand All</span>
  </div>
  <div class="legend">
    Incidents Tasks CRs Problems
  </div>
</div>