CODEWITHSUNDEEP
htmlcss
Surjya Narayana Padhi
Surjya Narayana Padhi

Reputation: 7841

How to create vertically centered html link button in a html div

I went through so many things about this. But still could not find any solution. In every solution some restrictions are there. Can anyone provide a generalized and easiet css code for my problem to put a html link button vertically center inside an div?

As below in the image, the create an account button is at the middle of the div google header-bar :) enter image description here

Upvotes: 1

Views: 3455

Answers (4)

Bartek S
Bartek S

Reputation: 532

You need to set line-height the same like height, and also display: inline-block

Here is a fiddle.

If you are using sass, then it is easy to write a mixin (in sass format):

=button($height: 40px)
  height: $height
  line-height: $height

Upvotes: 4

xpy
xpy

Reputation: 5641

There is this trick I do a lot:

.valign-content:before {
   content : ''; 
   display : inline-block; 
   width : 0; height : 100%; 
   vertical-align : middle; 
}

.valign-content>* { 
   vertical-align : middle; 
   display : inline-block; 
}

heres the demo: http://jsfiddle.net/pavloschris/5g3Cz/

Does the trick for me...

Upvotes: 1

Michaël Hompus
Michaël Hompus

Reputation: 3489

You can combine display:table-cell and vertical-align:middle

<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
  <a href="#link">
    <img src="" />
  </a>
</div>

Upvotes: 2

mpen
mpen

Reputation: 283313

Just set the heights and margins appropriately.

sample fiddle

<div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
</div>

#a {
    overflow: auto;
    background-color: yellow;
    height: 100px;
}
#b {
    height: 80px;
    background-color:red;
    width: 50px;
    float: left;
    margin-top: 10px;
}
#c {
    height: 50px;
    background-color: blue;
    width: 80px;
    float: right;
    margin-top: 25px;
}

Upvotes: 1

Related Questions