CODEWITHSUNDEEP
htmlcss
Valentin Coudert
Valentin Coudert

Reputation: 1919

Center a line vertically regarding the remaining vertical space

I don't really know how to put words on that but if you look at this fiddle, I'd like the "small value" line to be vertically centered in its space.

What I call its space is what's not occupied by "Title". I tried to set its line-height to 3em but it didn't help.

HTML

<div id="parent">
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value big">
      Big value
    </div>
  </div>
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value">
      Small value
    </div>
  </div>
</div>

CSS

#parent {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  place-content: stretch center;
  align-items: stretch;
}

.child {
  margin: 0 10px;
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.child .title {
  font-size: 1.5em;
  color: grey;
}

.child .value {
  font-size: 1.5em;
  color: black;
}

.value.big {
  font-size: 3em;
}

Upvotes: 0

Views: 59

Answers (1)

sol
sol

Reputation: 22949

You can make .child a flex container.

Then to center the value, add margin: auto to .value

fiddle

#parent {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  place-content: stretch center;
  align-items: stretch;
}

.child {
  margin: 0 10px;
  box-sizing: border-box;
  padding: 10px;
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.child .title {
  font-size: 1.5em;
  color: grey;
}

.child .value {
  font-size: 1.5em;
  color: black;
  margin: auto;
}

.value.big {
  font-size: 3em;
}
<div id="parent">
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value big">
      Big value
    </div>
  </div>
  <div class="child">
    <div class="title">
      Title
    </div>
    <div class="value">
      Small value
    </div>
  </div>
</div>

Upvotes: 2

Related Questions