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

我在容器中垂直居中文本时遇到一些问题。我试过设置显示：内联块；垂直对齐：中间对齐；但它似乎不起作用。非常感谢您的帮助

HTML:

---

垂直对齐：中间

属性使用

显示：表格单元格

。同时尝试两者。

一个基本示例是在

事件容器上使用
flex


.event容器{
显示器：flex；
对齐项目：居中；
}
/*演示目的*/
身体{
背景：灰色；
}
氢{
保证金：0；
}
.事件容器{
边框：实心1px；
背景：#fff；
}

十一月

十七,

星期二

标题
10:30

十一月

十七,

星期二

书名书名书名书名书名书名书名
10:30

准备JSFIDLE并暂时忽略php！！复制您的问题几乎是不可能的，因为您提供的标记和CSS不完整。正如@Yasir所说，在jsfiddle.net上设置一个完整的示例，我们将能够提供帮助。
<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>

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