html - 在不影响 JQuery 的情况下将文本垂直居中放置在我的 div 中

Question

如何在不影响 JQuery 的情况下使 div 中的文本垂直居中？我必须使所有 div 具有相同的高度吗？我一直在尝试添加前 50 名并留下 50 名，但它弄乱了我的 div 的大小。

迫切需要垂直文本!

JS Fiddle

jQuery(document).ready(function($) {

  $(document).ready(function() {
    maxheight = 0;
    $('.main article').each(function() {
      maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
    })
    $('.main article').height(maxheight);
  });

});

/*Landing Page*/

#landingpage {
  margin-top: 2.5em;
}
.landingpagetable {
  margin-top: 2.5em;
  max-width: 56em;
  margin: 0 auto 0;
}
.landingpage .main article {
  float: left;
  width: 29.33%;
  margin: 1%;
  padding: 1%;
  text-align: center;
  color: #fff;
  font-size: 2em;
  background-color: #d80000;
  min-height: 6.2em;
}
article.lp1 {
  /**/
  background-image: url(../../../wp-admin/images/cpr_lp_03.jpg);
  background-size: cover;
}
article.lp2 {
  background-image: url(../../../wp-admin/images/cpr_lp_04.jpg);
  background-size: cover;
}
article.lp3 {
  background-image: url(../../../wp-admin/images/cpr_lp_05.jpg);
  background-size: cover;
}
article.lp4 {
  background-image: url(../../../wp-admin/images/cpr_lp_07.jpg);
  background-size: cover;
}
article.lp5 {
  background-image: url(../../../wp-admin/images/cpr_lp_08.jpg);
  background-size: cover;
}
article.lp6 {
  background-image: url(../../../wp-admin/images/cpr_lp_09.jpg);
  background-size: cover;
}
@media all and (max-width: 800px) {
  .landingpage .main article {
    width: 100%;
  }
  .main article {
    background-image: none;
    min-height: 1em!important;
    max-height: 2em!important;
  }
}
@media all and (min-width: 1100px) {
  .landingpage .main article {
    width: 29.33%;
  }
  .main article {
    /*background-image:none;*/
    min-height: 9em!important;
    max-height: 9em!important;
  }
}
div#landingpage {
  max-width: 1100px;
  margin: 0 auto 0;
}
section.main #trial4444 p,
section.main #trial4445 p,
section.main #trial4446 p,
section.main #trial4447 p,
section.main #trial4448 p,
section.main #trial4449 p {
  display: none!important;
}
section.main #trial4444,
section.main #trial4445,
section.main #trial4446,
section.main #trial4447,
section.main #trial4448,
section.main #trial4449 {
  padding: 0;
  margin: 0;
  height: 0;
}
a:hover article.lp1,
a:hover article.lp2,
a:hover article.lp3,
a:hover article.lp4,
a:hover article.lp5,
a:hover article.lp6 {
  color: #fff;
  background-image: none;
  background-color: #d80000;
  /*adds zoom effect*/
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out
}
.landingpage .main article.lpfull {
  border: thin solid #d80000;
}
div#landingpage div.landingpage section.main h1 {
  font-size: 36pt;
  color: #d80000;
  text-align: center;
}
div.entry article.lpfull h1 {
  font-size: 36pt;
  color: #d80000;
  text-align: center;
}
article.lpfull p {
  float: left;
  padding-right: 2em;
}
article.lpfull {
  max-width: 1100px;
  margin: 0 auto 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="landingpage">
  <div class="landingpage">
    <section class="main">
      <h1>Find A Class</h1>
      <div id="trial4444">
        <a href="#">
          <article class="lp1">CPR &amp; AED Classes</article>
        </a>
      </div>
      <div id="trial4445">
        <a href="#2">
          <article class="lp2">CPR &amp; First Aid Classes</article>
        </a>
      </div>
      <div id="trial4446">
        <a href="#3">
          <article class="lp3">BLS Classes</article>
        </a>
      </div>
      <div id="trial4447">
        <a href="#4">
          <article class="lp4">EMSA Pediatric Classes</article>
        </a>
      </div>
      <div id="trial4448">
        <a href="#5">
          <article class="lp5">Instructor Training</article>
        </a>
      </div>
      <div id="trial4449">
        <a href="#6">
          <article class="lp6">Water Safety</article>
        </a>
      </div>
    </section>
  </div>
</div>
<hr>
<br>
<article class="lpfull">
  <h1>UPCOMING CLASSES</h1>
  [ESPRESSO_EVENTS_TABLE_TEMPLATE category_slug=current-classes order_by=event_name table_striping=false table_paging=false ]
</article>

Answer 1

这是我以前在 CSS 中用于实现垂直居中的解决方案。这适用于所有现代浏览器。

<div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

How to vertically center image inside div