CODEWITHSUNDEEP
htmlcssmargin
Robert
Robert

Reputation: 135

margin - curious behaviour

I have the following problem. When I try to position my button using

margin: 0 auto;

It sticks the button to the left. If I type any number eg.

margin: 0 100px;

it does work. I am curious what I am missing? I have

display: block;
width: 200px;

I would like to add that I need to position this button at the bottom of the container. 3% of the bottom edge of the screen and in the middle of the screen.

this is my HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

and CSS

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}

Thank you in advance Robert

Upvotes: 1

Views: 49

Answers (3)

Jos van Weesel
Jos van Weesel

Reputation: 2198

The reason why your margin: auto; does not work is because your button has a position: absolute;

Of course you want to solve this without having to change the elements' position. With position: absolute; you can use the left and right properties: left: 0; and right: 0; this will center an element with the position of absolute relative to (the width of) its parent that has a position of relative.

View the Code Snippet below in Full Page to have a better view.

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    left: 0; /* added */
    right: 0; /* added */
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

Upvotes: 1

Johannes
Johannes

Reputation: 67799

As VXp already wrote in his comment: To horizontally center an absolutely positioned element inside its container, you need left: 50% (which moves its left border to the middle) and transform: translateX(-50%) (which moves the element back left by half of its own width) - see the snippet below, where those are the only changes to your given code. (and margin: 0 autowon't do anything in this case, since it's position: absolute)

.container {
  width: 1100px;
  height: 100vh;
  margin: 0 auto;
  background-color: black;
  position: relative;
}

.group {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(53, 20, 131);
  position: absolute;
}

.element {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-color: rgb(131, 20, 44);
  position: absolute;
}

.btn {
  display: block;
  position: absolute;
  bottom: 3%;
  width: 200px;
  height: 46px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #fff;
  text-align: center;
  text-transform: capitalize;
  padding: 14px 0 0 0;
  font-size: 1em;
  font-weight: 100;
  text-decoration: none;
  color: rgb(119, 20, 20);
  border-radius: 25px;
  letter-spacing: 3px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>

<body>
  <div class="container">
    <div class="group">
      <div class="element">

      </div>
    </div>
    <a href="#" class="btn">button</a>
  </div>
</body>

</html>

Upvotes: 0

Veljko Ilić
Veljko Ilić

Reputation: 161

Its because of the position absolute if you want to center it try adding this to your code:

.btn{
left: 50%;
transform: translateX(-50%);

}

Upvotes: 2

Related Questions