How to vertically center inline-block elements

Question

These two icons should be printed in the same line and vertically aligned with the container box

HTML:

<div id="field-filter-TIPO" class="container"><svg aria-hidden="true" role="img" class="octicon octicon-x-circle-fill first" viewBox="0 0 12 12" width="12" height="12" fill="currentColor">
    <path fill-rule="evenodd" d="M1.757 10.243a6 6 0 118.486-8.486 6 6 0 01-8.486 8.486zM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763l-2 2z"></path>
  </svg>
  <div title="ColumnFilter" kind="ColumnFilter" id="columnfilter--fetching" name="Fetching" class="second"><button><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" font-size="24" class="css-1cx02qk" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <desc></desc>
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M5.5 5h13a1 1 0 0 1 .5 1.5l-5 5.5l0 7l-4 -3l0 -4l-5 -5.5a1 1 0 0 1 .5 -1.5"></path>
      </svg></button></div>
</div>

CSS:

.container {
    display: block;
}

.first {
    display: inline-block;
  user-select: none; 
  overflow: visible;
}

.second {
    display: inline-block;
}

However the left icon is printed as it is like pushed to the bottom

How can I vertically center both elements like the container defines a display: flex with align-items: center?

jsfiddle link

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — CBroe, Oct 17 '22 at 11:57
`display: flex; align-items: center;` Apply these on the container with id `field-filter-TIPO` and you should be good. — Santosh, Oct 17 '22 at 11:59
@Santosh I can't use flex because I need to set a negative right margin for the icon on the left — Antonio Santoro, Oct 17 '22 at 12:15
@AntonioSantoro how about applying `margin-bottom: 5px;` for `.first` selector? — Santosh, Oct 17 '22 at 12:23
_"doesn't help"_ - yes, it does - as soon as you apply it to _both_ elements, to override the default value `baseline`. — CBroe, Oct 17 '22 at 12:28
Yeah I was wrong, why it won't align the first element if the second one defines `baseline`? — Antonio Santoro, Oct 17 '22 at 12:52

How to vertically center inline-block elements

0 Answers0