CODEWITHSUNDEEP
htmlcssbordercentermargins
Asttomore
Asttomore

Reputation: 17

How to center a border

I'm fairly new to CSS. I've been searching for answers about centering a div. I did looked some answers this site but it's doesn't help me very much. I want to have a perfect center. Thank you!

This is my image:

[IMG]http://i58.tinypic.com/2na1k6u.jpg[/IMG]

<!DOCTYPE html>
<html>
<head>
<style>

@font-face {
    font-family: stonehen; src: url('stonehen.ttf'); }



    @font-face {
        font-family: stonehen src: url('stonehen.ttf'); 
        font-weight: bold; }
div {    
        border: 4px solid #A9A9A9;
        margin: auto;
        color: #A9A9A9;
        text-align: center;
        background: #006400;
        border-radius: 25px;
        padding: 6px;
        font-family: stonehen, san-serif;
        font-size: 150%;
        font-weight: bold;
        width: 300px; }

    </style>
    </head>
    <body>

    <div> Welcome </div>

    </body>
    </html>

Upvotes: 1

Views: 2253

Answers (2)

CChoma
CChoma

Reputation: 1154

If you want to center horizontally only...

div {
  display:block;
  margin: 0 auto;
}

If you want it center BOTH horizontally and vertically you will need a fixed height and width to position it. Set the absolute positioning halfway along the x axis, and halfway along the y axis. Then "nudge" it back with negative margins that are half the width and half the height.

div {
  display:block;
  position:absolute;
  width: 300px;
  height:100px;
  top 50%;
  left:50%;
  margin-top:-50px; /*half of element height*/
  margin-left-150px; /*half of element width*/
}

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

Just add in the end of your div{} and it will be perfectly centered:

height: 25px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

Upvotes: 0

Related Questions