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

使用以下过程：

vertical-align：50％的图像和句子
vertical-align：50％; line-height：段落的25％

<强>参考

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

三列内联块内容

1 个答案: