無法在容器內垂直居中對齊文本

Question

在將文本垂直居中放置在容器中時，我遇到了一些麻煩。 我試過設置顯示：inline-block; 垂直對齊：中間；垂直對齊： 但它似乎不起作用。 任何幫助都非常感謝！

HTML：

<div class="col2" data-equal="div">
    <h1>Upcoming Events</h1>

    <?php query_posts('post_type=event&posts_per_page=4'); ?>
    <?php while (have_posts()) : the_post(); ?>

    <a href="<?php the_permalink(); ?>">
      <div class="event-container group">
        <div class="col1">
          <p>NOV</p>
          <p>17</p>
          <p>TUE</p>
        </div>

        <div class="col2">
          <h2><?php the_title(); ?></h2>
          <p><?php the_field('time'); ?></p>
        </div>
      </div>
    </a>

    <?php endwhile; wp_reset_query(); ?>
  </div>

CSS：

.news-events .col2 .event-container {
  background-color: #ECF0F1;
  border-radius: 3px;
  padding: 5px 15px;
  margin-bottom: 25px;
  font-family: Verdana;
}

.news-events .col2 .event-container .col1 {
  width: 15%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
}

.news-events .col2 .event-container .col1 p {
  vertical-align: middle;
}

.news-events .col2 .event-container .col2 {
  width: 85%;
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
}

.news-events .col2 .event-container h2 {
  font-weight: 400;
  font-family: 'Merriweather';
  margin-top: 10px;
  margin-bottom: 5px; 
}

.news-events .col2 .event-container p {
  margin-top: 5px;
  margin-bottom: 5px;
}

Answer 1

vertical-align: middle屬性與display:table-cell 。 一起嘗試。

Answer 2

一個基本的例子是在.event-container上使用flex

 .event-container { display: flex; align-items: center; } /* DEMO PURPOSES */ body { background: grey; } h2 { margin: 0; } .event-container { border: solid 1px; background: #fff; } 

 <div class="event-container group"> <div class="col1"> <p>NOV</p> <p>17</p> <p>TUE</p> </div> <div class="col2"> <h2>The title</h2> <p>10:30</p> </div> </div> <div class="event-container group"> <div class="col1"> <p>NOV</p> <p>17</p> <p>TUE</p> </div> <div class="col2"> <h2>The title The title The title The title The title</h2> <p>10:30</p> </div> </div>