How to center a text vertically in a Bootstrap footer?-CodePudding

what is the best way to create a footer in Bootstrap where in the middle (horizontally) of the screen is a text with two lines and at the end of the screen (horizontally) is a text with one line, but centered vertically?

I try to create the footer with columns and offset columns - but is it the best way? Additional I don't figured out how to center the one line.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<footer >
  <div >
    <div >
      <div >
        <div >First Line</div>
        <div >Second Line</div>
      </div>
      <div >
        <div >One Line Centered</div>
      </div>
    </div>
  </div>
</footer>

CodePudding user response：

Edit:

The correct way to do this in modern browsers is to use Flexbox.

See this for details.

I'm updating my code:- [I'm adding a border in each div to clear your expectation]

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style> div{ border: 1px solid green;} </style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<footer >
  <div >
    <div >
      <div >
        <div >First Line</div>
        <div >Second Line</div>
      </div>
      <div  style="display: table; overflow: hidden;">
        <div  style="display: table-cell; vertical-align: middle;">One Line Centered</div>
      </div>
    </div>
  </div>
</footer>