CODEWITHSUNDEEP
css
Rahul Desai
Rahul Desai

Reputation: 15491

unable to vertically center align floated element

In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.

I tried vertical-align: middle also played with the line-height but I did not get the desired effect.

What am I missing?

jsFiddle

Upvotes: 0

Views: 85

Answers (4)

misterManSam
misterManSam

Reputation: 24692

One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;

Have a fiddle!

  1. #bar has display: table
  2. h4 and #actions are treated as "table cells"

HTML

<div id="bar">
    <h4>Tasks</h4>
    <span id="actions">
        <input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
        <input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
    </span>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family:"Arial";
    font-size: 62.5%;
}
#actions button {
    background: none;
    border: 0rem;
}
#actions button input {
    outline: none;
}
#bar {
    background-color: #4196C2;
    display: table;
    width: 100%;
}
h4 {
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
    margin-top: 2rem;
    /* = 20px */
    color: white;
    padding: 20px;
    font-size: 1.8rem;
}
#actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Upvotes: 2

Dhruv Chaudhary
Dhruv Chaudhary

Reputation: 21

You have not styled the span which contains the two buttons. Add the following:

#actions {
    display: block;
    margin: 0 0 0 0;
    padding: 15px 0 0 0
}

Here you go: http://jsfiddle.net/csTS7/151/

Upvotes: 1

Mahesh Budeti
Mahesh Budeti

Reputation: 394

Here's the JsFiddle

h4{
    text-decoration: none;
    display: inline-block;
  /*  margin-top: 2rem;         = 20px */
    color: white;
    margin-left: 1.5rem;
    font-size: 1.8rem;
    line-height: 15px;

}

I have given the element bar a minimum height and removed margin top for h4 and added line-height

Upvotes: 0

miguelcalderons
miguelcalderons

Reputation: 69

Add in the div a margin-top and do it with percent for example

#bar
{
margin-top: 5%;
}

Upvotes: 0

Related Questions