三列内联块内容

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