1

I am trying to center text vertically inside a scrollable element with display: block. The code works ok in case there are multiple lines, but if there are only 1 or 2 lines, they just stick to the top. Changing display:block to something else would break the layout of the page and require spending around a week to rewrite all the styles and make it work again. Is there a way to avoid this?

Here is the code:

.wrapper {
    display: block;
    overflow-y: scroll;
    height: 55px;
}

<div class="wrapper">
  <div>
    .....text content.....
  </div>
</div>

Example code: https://www.w3schools.com/code/tryit.asp?filename=GIZNNLYQBPUE

Basically, what I need is to center the content in case there are not enough lines to fill all the height of a parent div.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Hirasawa Yui
  • 1,138
  • 11
  • 29

0 Answers0