無法在容器中垂直居中文本

我在垂直居中文本的容器中遇到了一些問題。我試過設置顯示：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; 
}

來源

2015-12-07 MrDevRI

製備的jsfiddle http://jsfiddle.net/並忽略PHP現在!! – Yasir

由於您提供的標記和CSS不完整，因此重現您的問題幾乎是不可能的。正如@Yasir所說，在jsfiddle.net上設置完整的示例，我們將能夠提供幫助。 –

vertical-align: middle與display:table-cell財產的工作。一起嘗試。

來源

2015-12-07 18:59:03

一個基本的例子將是使用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>

來源

2015-12-07 19:18:13 Aaron

無法在容器中垂直居中文本

回答

相關問題