html - inline-block content over three columns -

i trying vertically align content on 3 columns (bootstrap framework) want effect on screen size columns, stacks fine col-xs-12 added.

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 , 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;  } 

this output 3 columns. responsive image (background of div), paragraph of text, , sentence website copyright/creds.

the paragraph appears hardest, can more 1 line depending on screen size, want stay vertically centred beside other 2 elements.

use following process:

• vertical-align: 50% image , sentence
• vertical-align: 50%; line-height: 25% paragraph

references

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