1

Consider the example: http://jsfiddle.net/xExxp/1/

<div class="container">
    <div class="row">
        <div class="col-xs-12  col-md-4">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div>
        <div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>

And I have the CSS:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Seems not working, any idea?

Zanon
  • 29,231
  • 20
  • 113
  • 126
Howard
  • 19,215
  • 35
  • 112
  • 184

2 Answers2

1

enter image description here

If above image is the output you are looking for:

CSS:

.headerrow{
 display: table;   
}

.logoimage{
 display: table-cell;   
}
.vcenter {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

HTML:

<div class="container">
    <div class="row headerrow">
        <div class="col-xs-12  col-md-4 logoimage">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div>
        <div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>
mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • Work partially but it affect the container width: http://jsfiddle.net/xExxp/2/ (Try to make the screen wider) – Howard May 17 '14 at 08:19
  • add width: 100% to your headerrow. .headerrow { display: table; width: 100%; } it will fill the parent container now. – mohamedrias May 17 '14 at 09:12
-2

I know this is an old question but for others who land here should be helpful this post https://stackoverflow.com/a/20548578/10075027

You have to apply .vcenter class to both .col- elements, also in some cases you have to use <!-- --> (you can use other type of comment it´s just for clear spaces between those elements)

Here is example using your .vcenter class

<div class="container">
    <div class="row">
        <div class="col-xs-12  col-md-4 vcenter">
            <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' />
        </div><!--
        --><div class="col-xs-12  col-md-8 vcenter">BAR</div>
    </div>
</div>
adobovs
  • 1
  • 2