CODEWITHSUNDEEP
htmlcss
himanshu archirayan
himanshu archirayan

Reputation: 223

vertical-align:middle on text not working

I am trying to align <div> text vertically in the middle. Here is the JSFiddle which I tried. But it’s not working for me.

.cart_channels_main {
  float: left;
  height: 285px;
  margin: 0 18px 15px 0;
  text-align: center;
  width: 100%;
  vertical-align: middle;
}
.cbheading {
  background: #000 none repeat scroll 0 0;
  color: #c7a375;
  height: 30px;
  padding: 5px;
  font-family: "Roboto Condensed", sans-serif !important;
  vertical-align: middle;
}
<div class="col-sm-3">
  <div class="cart_channels_main">
    <div class="cbheading"><b>vertical align middle</b>
    </div>
  </div>
</div>

And some time i have text in 2 line, so if i use padding of margin or line height it will not work for 2 line text. like in this example LINK

Upvotes: 2

Views: 406

Answers (6)

kubik_rubic
kubik_rubic

Reputation: 133

You can add hidden element for correct align:

.cbheading:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Upvotes: 1

akash
akash

Reputation: 2157

Try this

.cbheading {
    background: #000 none repeat scroll 0 0;
    color: #c7a375;
    height: 30px;
    padding: 5px;
     font-family: "Roboto Condensed",sans-serif !important;
    vertical-align:middle;
    line-height: 30px;//added
}

Demo

For you

.cbheading {
    background: #000;
    color: #c7a375;
    padding: 5px;
    height: 30px;
    display: table;
    width: calc(100% - 10px);
}
.cbheading b {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

Prachi Gharde
Prachi Gharde

Reputation: 74

You can apply display property.

.cbheading{
  display: table;
  width:100%;
}

.cbheading b{
   display: table-cell;
   vertical-align : middle;
}

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Add height:auto instead of height:30px;

Try this

.cbheading {
    background: #000 none repeat scroll 0 0;
    color: #c7a375;
    height:auto;  //changed this
    padding: 5px;
     font-family: "Roboto Condensed",sans-serif !important;
    vertical-align:middle;
    line-height: 30px;

}

Demo Here

Upvotes: 1

user3497034
user3497034

Reputation:

Try this code. Copy this code with your css.

  .cart_channels_main {
    float: left;
    height:auto;
    margin: 0 15px 15px 0;
    text-align: center;
    width: 100%;    
    vertical-align:middle;
}


.cbheading {
    background: #000 none repeat scroll 0 0;
    color: #c7a375;
    height: auto;    
     font-family: "Roboto Condensed",sans-serif !important;
    vertical-align:middle;
    line-height: 30px;

}

Upvotes: 1

Amit singh
Amit singh

Reputation: 2036

You can add line height

Add this..

CSS

.cart_channels_main {
  float: left;
  height: 285px;
  margin: 0 18px 15px 0;
  text-align: center;
  width: 100%;
  vertical-align: middle;
  line-height: 20px;
}

And you can do like this also.. Instead of above you can add padding-top so that text is vertically aligned..

.cbheading {
    background: #000 none repeat scroll 0 0;
    color: #c7a375;
    height: 30px;
    Padding-top:10px;
    font-family: "Roboto Condensed",sans-serif !important;

}

Upvotes: 1

Related Questions