我正在尝试在三列(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的背景),一段文字和一个句子,即网站的版权/信条。

该段似乎是最难的,根据屏幕大小可以超过一行,我希望它在其他两个元素旁边保持垂直居中。

最佳答案

使用以下过程:


垂直对齐:图像和句子的50%
垂直对齐:50%;行高:该段落的25%


参考文献


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

关于html - 三列内联块内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31353012/

10-10 09:10