三列內聯塊內容

Question

我想在三列（Bootstrap框架）上垂直對齊內容我只希望在屏幕大小的列上使用此效果，它可以很好地添加col-xs-12。

HTML

<div class="row sub-footer"> 

    <div class="col-xs-12 col-md-1"> 
     <a class="sub-footer-brand" href="<?php echo home_url(); ?>"></a>   
    </div> 
    <div class="col-xs-12 col-md-5">  
     <div class="sub-logo-text"><p>A designer and creative strategist specializing in new business ventures</p></div> 
    </div> 

    <div class="col-xs-12 col-md-6 fcred"> 
     <p class="fcred">&copy; <?php echo date('Y');?> - <strong><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"> <?php bloginfo('name'); ?></a></strong> <?php bloginfo('description'); ?></p> 
    </div> 

</div><!-- /sub-footer --> 

CSS

.sub-footer-brand { 
display: block; 
margin: 0; padding: 0; 
height: 40px; 
width: 100%; 
background: url('img/logo.png') no-repeat center center; 
background-size: contain; 
} 

.sub-logo > div { 
display: inline-block; 
vertical-align: middle; 
} 

.sub-logo-text {  
padding-left: 20px; 
border-left: 1px solid #ddd; 
} 

.fcred { 
text-align: right; 
padding-right: 20px; 
line-height: 40px; 
} 

此輸出三列。一個響應式圖像（div的背景），一段文字和一個句子，它是網站的版權/聲譽。

該段看起來是最難的，它可以根據屏幕大小不止一行，我希望它保持垂直居中，在其他兩個元素旁邊。

Answer 1

使用以下過程：

• 垂直對齊：對圖像和句子50％
• 垂直對齊：50％;行高：該段的25％

參考

• vertical-align, inline-block, and line-height