麻烦在容器内垂直居中文本

Question

我在将文本垂直居中放在其容器中时遇到了一些麻烦。我试过设置display：inline-block;和vertical-align：middle;但它似乎没有用。非常感谢任何帮助！

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

一个基本示例是在flex

上使用.event-container

.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>