html - 无法在容器内垂直居中文本

Question

我在容器中垂直居中文本时遇到了一些问题。我试过设置 display: 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 一起使用。一起尝试。