CODEWITHSUNDEEP
htmlcss
ncr07
ncr07

Reputation: 57

How can I center a button inside a div vertically

I want to display a button centered inside a div. I did it with the following:

transformation:translateY(25%);

but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:

#buttonSwap.swap{
        background: url("../img/thumb_10600.png") no-repeat;
        height: 15px;
        width: 15px;
        border: none;
    }

    .swapCities{
        float: left;
        height: 100%;
        width: 15px;
        margin: 5px 8px 0px 8px;
    }

and the HTML code is the following:

<div class="swapCities">
                        <input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
                    </div>

Upvotes: 3

Views: 9221

Answers (4)

Eric D
Eric D

Reputation: 506

Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;

you can use top:50%; left:50%;... this will align the top-left corner of the button to center;

To complete the centering, you need to add margin to the button to equal half of the width and height.

Copy/Paste the below into an .html document, and you will see it at work.

<!DOCTYPE html>
<html>
<body>
    <style>
        center { background-color:#CCCCCC; position:relative; min-height:600px; }
        button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
    </style>
    <center>
        <h2>Content Area</h2>
        <button type="button">Click Me</button>
    </center>
</body>
</html>

Upvotes: 1

Michał Dudak
Michał Dudak

Reputation: 5048

There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.

Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:

.swapCities:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#buttonSwap {
  display: inline-block;
  vertical-align: middle;
}

Upvotes: 4

Alan Dunning
Alan Dunning

Reputation: 1351

You could use position: absolute; then top: 50% property to offset.

Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE

Your css will look like this:

.swapCities{
  position: relative;
  height: 100px; width: 100px;
  margin: 5px 8px 0px 8px;
  border: 1px solid;
}

#buttonSwap.swap{
  position: absolute; 
  top: 50%; margin-top: -9px; 
  left: 50%; margin-left: -9px;
  background: url("../img/thumb_10600.png") no-repeat;
  height: 15px; width: 15px;
  border: 1px solid;
}

Upvotes: -1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need something like this:

.swapCities{
    display: inline-block;/* or table-cell */
    vertical-align: middle;
}

Upvotes: 1

Related Questions