Place div aligned to center of other div

Question

I have this html code, and i need to place second box aligned to the center of the first box, but header of the second box should stay on it place at the top, aligned with the text of the first box. Headers change itself dynamically, so it shouldn't have static properties like position relative or whatever. I tried it to solve with JavaScript and it was perfect until i zoomed out and called print();, my second box change its position along with zooming. So i guess the best options to solve it with CSS.

.box-vals{margin-right:50px;margin-bottom:10px;}
.bot-char-all{margin-top:-10px;margin-bottom:5px;}
.bot-char-all{display:flex;flex-flow:row nowrap;align-items:flex-end;}
.bot-char{padding-top:5px;display:flex;}
.char,.char-value{width:100px;}
.char{margin-bottom:5px;margin-right:20px;width:200px;}
.char-span{font-size:13px!important;display:block;margin:0px!important;}
.char-pre{margin-top:5px;padding:10px 5px;border:2px solid #192E7B;}
.char-val-span{margin:0 auto;display:table;font-size:20px;position:relative;top:2px;}
.char-pre span{font-weight:bold;}
.char-pre-val{margin-top:5px;padding:10px;color:white;}
.char-pre-val.seismic-val{background:#B6A4CF;}

<div class="bot-char-all">
  <div class="bot-char" style="">
    <div class="char"><span class="char-span">Ipsum dolor ipsum dolor ipsum doloripsum</span>
      <div class="char-pre seismic">
        <span id="seismic-print" class="char-val-span long">ipsum dolor ipsum</span>
      </div>
    </div>
    <div class="box-vals">
      <div class="char-value"><span class="char-span">Ipsum dolor</span>
        <div class="char-pre-val seismic-val" style="background:rgb(123, 161, 196);color:white;"> 
          <span id="seismicZone-print" class="char-val-span">123</span>
        </div>
      </div>
    </div>
  </div>
</div>

Bad:

Good:

Are you allowed to make some changes to current HTML markup or you can't modify the HTML part, and have to do all using CSS only? — palaѕн, Apr 30 '20 at 14:42
You can't do this with `flex` alone. You can set `.char-span { min-height: 2em} ` or something to have a default height of 2 lines. but then it will break with 3 lines. Alternative is to use `display: grid` — cloned, Apr 30 '20 at 14:48

Place div aligned to center of other div

0 Answers0