html - 如何垂直居中对齐文本？

Question

我有这个网站:

http://avocat2.dac-proiect.ro/?page_id=21

如您所见，我的文本没有按应有的方式垂直对齐。我希望所有分辨率都更低且相同

这是代码 html:

    <div class="entry-content2">

<div class="gigi">

  <div class="row">
    <div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
       <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
    </div>
   </div>
</div>
        <div class="container-fluid aliniere">
<p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:20px;">Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:</p>
<div class="row sss">
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-2" style="font-size:17px;color:white;">
<p class="text-left">Drept civil<br>
– agricultură, exploatări agricole, prelucrarea şi comercializarea produselor agricole;<br>
– comerţ cu produse alimentare;<br>
– imobiliar;<br>
– distribuţie de carburanţi;<br>
– transporturi;<br>
– asigurări;<br>
– producţie şi comercializare utilaje grele;<br>
– producţie structuri metalice;<br>
– design, fotografie, artă;
</p>
<p></p></div>
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
<p class="text-left">Drept administrativ<br>
– producţie automatizări;<br>
– servicii de proiectare;<br>
– comercializare automatizări;<br>
– jocuri de noroc;<br>
– turism, hoteluri şi pensiuni;<br>
– medical;<br>
– construcţii civile şi industriale;<br>
– comercializare utilaje şi autovehicule, service auto;<br>
– producţie software, administrarea site-urilor; </p>
<p></p></div>
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
<p class="text-left">
– comerţ;<br>
– bursier, societăţi listate, investitori, fonduri de investiţii;<br>
– asistenţă şi îngrijire copii şi vârstnici;<br>
– exploatări forestiere şi prelucrarea lemnului;<br>
– extracţia şi prelucrarea minereurilor;<br>
– producţia şi comercializarea materialelor de construcţii;<br>
– instituţii publice;<br>
– instituţii religioase.</p>
<p></p></div>
<p></p></div>
</div>
    </div>

你能帮我解决这个问题吗？

我找到了这个例子，但我们没有实现它，所以我调用你的帮助

http://jsfiddle.net/v5tc0ga3/

提前致谢!

Answer 1

您可以在父容器上使用 display:table;，在需要垂直对齐的子元素上使用 display:table-cell。

同时显示:表格；很好地支持跨浏览器:

http://caniuse.com/#feat=css-table

body,html{
    height:100%;
}

div {
  width: 250px;
  height:100%;
  display: table;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
}

JSFIDDLE http://jsfiddle.net/a_incarnati/v5tc0ga3/83/