CODEWITHSUNDEEP
htmlcsstwitter-bootstrapheight
Nicole
Nicole

Reputation: 1416

vertically align span in bootstrap row

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

Upvotes: 1

Views: 8791

Answers (2)

Nicole
Nicole

Reputation: 1416

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!

Upvotes: 1

Sarbasish Mishra
Sarbasish Mishra

Reputation: 156

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

Upvotes: 0

Related Questions