1

I have a bootstrap div with "row" class, and 2 divs inside acting as columns, A and B.

A contains a span with an icon. B contains a panel which height is variable, even after it loads, the user can add things to it and its height can still grow or become smaller.

I need to vertically center my span, taking the panel's height as reference.

here's my code:

<div class="row">
    <div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-9">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div>

The first part is how it is displayed now, and the second part is how I want it to be displayed. As you can see, the "content" is editable inline, so if the panel grows, the span needs to adjust as well.

enter image description here

thank you very much!

EDIT 1 I must add that I am using IE. I tried the first suggestion and this is the result:

enter image description here

Nicole
  • 1,356
  • 3
  • 21
  • 41
  • Those images look the same to me. – j08691 Apr 10 '15 at 13:39
  • maybe this awnser on stack overflow will help http://stackoverflow.com/questions/20465825/vertical-align-middle-with-bootstrap-responsive-grid – Rik Apr 10 '15 at 13:41

2 Answers2

1

I ended up using this:

<div class="row">
    <div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-10 v-align">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div>

where:

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

Please note, that both columns added, equals 11, instead of 12. There was the key! I don't know why, but if I left it 1 and 11 (resulting in 12 in total) it was displayed as mi edit image.

Thank you!

Nicole
  • 1,356
  • 3
  • 21
  • 41
0

Yes, You can do it, But you have to remove some bootstrap class and add two of your own class and you can set it easily. Here is the code

.content{
  clear:both;
  display:block;
}
.a{
  display:inlin-block;
  vertical-align:middle;
  width:20%;
}


.b{
  display:inlin-block;
  vertical-align:middle;
  width:80%;
}
<div class="row">
  <div class="col-lg-12">
    <div class="content">
    <div class="a">
      <span class="icon-clipboard icon-agenda-item"></span>
    </div>
    <div class="b">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div>  
    </div> 
    </div>
    </div> 
</div>

I hope This will help you

Regards, Sarbasish

Sarbasish Mishra
  • 157
  • 1
  • 8
  • Thank you! but it still doesn't work, I will edit my question so you can see. – Nicole Apr 10 '15 at 14:03
  • Actually What your did in your code. It will not work. If you replace the code with my code, Then it will work. you can set the width of a and b class and change according to screen size. – Sarbasish Mishra Apr 13 '15 at 06:22