There is a container with blocks on bootstrap . How to make a universal (do not depend on the amount of text and block height) an adaptive version of aligned text boxes in horizontal and vertical center with ie9+ cross-browser ie9+ ? Fidl Practically it turned out to be done, the only thing is that if a certain height is needed for the main unit, then this does not work. How to bring to the universal option?

 .main { background-color: #231f20; color:#fff; min-height: 100px; height:1px; } .container { height: 100%; background-color: red; } .table { display:table; table-layout: fixed; width:100%; height: 100%; background-color: blue; margin-bottom:0; } .table-cell { display:table-cell; vertical-align:middle; text-align: center; float: none !important; background-color: green; height: 100%; } p { margin: 0; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="main"> <div class="container"> <div class="row"> <div class="table"> <div class="col-sm-3 table-cell"> <p>test</p> </div> <div class="col-sm-3 table-cell"> <p>test<br />test</p> </div> <div class="col-sm-3 table-cell"> <p>test<br />test<br />test</p> </div> <div class="col-sm-3 table-cell"> <p>test<br />test</p> </div> </div> </div> </div> </div>

  • one
    Do it on flex. align-content - align-content - lazyproger
  • @ Dmitriy Prikhodchenko cross-browser compatibility ie9+ - read the description carefully. flex is not a universal option .. - Vasya

3 answers 3

 section { height: 200px; background: silver; text-align: center; } section:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } div { display: inline-block; text-align: left; vertical-align: middle; } 
 <section><div> <p>test</p> </div><div> <p>test<br />test</p> </div><div> <p>test<br />test<br />test</p> </div><div> <p>test<br />test</p> </div><div> <p>test</p> </div></section>

Formatting is not accidental . It is also worth noting that there should also be no spaces between the <section><div> , otherwise it will appear due to :before between it and the first block (also the centering of this will be broken).

  • beautifully, then in that case bootstrap rubber is lost, i.e. under each permission will you have to set your own indents? - Vasya
  • @ Vasya, I don’t think so, but I don’t really understand the question. Can you clarify what kind of rubber is required to get? In general, you can use flex. - Qwertiy ♦
  • tested - no, everything is fine, not lost. flex possible, but not for this task, because I need cross-browser compatibility ie9+ - Vasya

If I understand you correctly, then you just need to add text-align to the .table-cell block.

Like this:

 .table-cell { display: table-cell; vertical-align: middle; text-align: center; }

  • No, they did not understand correctly - you see that the lines are not aligned with the vertical center? This is the most difficult - Vasya

You had to just add the styles .row {height:100%;} . Here is the universal and cross-browser ie9+ option

 .main { background-color: #231f20; color: #fff; min-height: 100px; height: 1px; } .container { height: 100%; background-color: red; } .row { height: 100%; } .table { display: table; table-layout: fixed; width: 100%; height: 100%; background-color: blue; margin-bottom: 0; } .table-cell { display: table-cell; vertical-align: middle; text-align: center; float: none !important; background-color: green; height: 100%; } p { margin: 0; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="main"> <div class="container"> <div class="row"> <div class="table"> <div class="col-sm-3 table-cell"> <p>test</p> </div> <div class="col-sm-3 table-cell"> <p>test <br />test</p> </div> <div class="col-sm-3 table-cell"> <p>test <br />test <br />test</p> </div> <div class="col-sm-3 table-cell"> <p>test <br />test</p> </div> </div> </div> </div> </div>