How can I position this block at top of page, but horizontally centered?

I am trying to use CSS+HTML to position a purple block at the top of the viewport. I want the purple block to be horizontally centered and appear on top of anything else. The way my code is organized, other elements (a green button) must appear above the purple block in my HTML file.

I'm using the HTML below. Properly positions the block at the top of the page and on top of other elements. But it is not horizontally centered. How can I make it horizontally centered using CSS?

Plunker here.

enter image description here

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        margin: auto;

        background-color: purple;

        z-index: +1;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

add a comment |

I'm using the HTML below. Properly positions the block at the top of the page and on top of other elements. But it is not horizontally centered. How can I make it horizontally centered using CSS?

Plunker here.

enter image description here

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        margin: auto;

        background-color: purple;

        z-index: +1;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

add a comment |

I'm using the HTML below. Properly positions the block at the top of the page and on top of other elements. But it is not horizontally centered. How can I make it horizontally centered using CSS?

Plunker here.

enter image description here

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        margin: auto;

        background-color: purple;

        z-index: +1;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

I'm using the HTML below. Properly positions the block at the top of the page and on top of other elements. But it is not horizontally centered. How can I make it horizontally centered using CSS?

Plunker here.

enter image description here

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        margin: auto;

        background-color: purple;

        z-index: +1;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

html css

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

asked Nov 23 '18 at 6:26

Saqib Ali

7911256138

add a comment |

4 Answers
4

active

oldest

votes

Apply below code

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

add a comment |

apply below code z-index: 9999; margin-left: 20%;

.top-block {

    position: absolute;

    top: 0px;

    height: 30px;

    width: 60%;

    margin: auto;

    background-color: purple;

    z-index: 9999;   

    margin-left: 20%;

}

answered Nov 23 '18 at 6:31

Rahul

3,012159

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

add a comment |

Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class

answered Nov 23 '18 at 6:37

Alan Maldonado

138

add a comment |

This should help in centering the div horizontally!

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Lucifer

18111

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441566%2fhow-can-i-position-this-block-at-top-of-page-but-horizontally-centered%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

Apply below code

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

add a comment |

Apply below code

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

add a comment |

Apply below code

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

Apply below code

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

.pretty-button 

{

  color: white;

background-color: rgba(17, 175, 29, 0.64);

border-radius: 0.6em;

border: 0.2em solid #73AD21;

padding: 0.5em;

display: flex;

margin: auto;

z-index: 9;

position: relative;

}



.top-block 

{

  position: absolute;

  top: 0px;

  height: 60px;

  width: 60%;

  margin: auto;

  background-color: purple;

  z-index: +1;

  left: 0;

  right: 0;

}

<!DOCTYPE html>

<html>

  <head>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

answered Nov 23 '18 at 6:41

Chandresh Polra

1014

add a comment |

apply below code z-index: 9999; margin-left: 20%;

.top-block {

    position: absolute;

    top: 0px;

    height: 30px;

    width: 60%;

    margin: auto;

    background-color: purple;

    z-index: 9999;   

    margin-left: 20%;

}

answered Nov 23 '18 at 6:31

Rahul

3,012159

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

add a comment |

apply below code z-index: 9999; margin-left: 20%;

.top-block {

    position: absolute;

    top: 0px;

    height: 30px;

    width: 60%;

    margin: auto;

    background-color: purple;

    z-index: 9999;   

    margin-left: 20%;

}

answered Nov 23 '18 at 6:31

Rahul

3,012159

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

add a comment |

apply below code z-index: 9999; margin-left: 20%;

.top-block {

    position: absolute;

    top: 0px;

    height: 30px;

    width: 60%;

    margin: auto;

    background-color: purple;

    z-index: 9999;   

    margin-left: 20%;

}

answered Nov 23 '18 at 6:31

Rahul

3,012159

apply below code z-index: 9999; margin-left: 20%;

.top-block {

    position: absolute;

    top: 0px;

    height: 30px;

    width: 60%;

    margin: auto;

    background-color: purple;

    z-index: 9999;   

    margin-left: 20%;

}

answered Nov 23 '18 at 6:31

Rahul

3,012159

answered Nov 23 '18 at 6:31

Rahul

3,012159

answered Nov 23 '18 at 6:31

Rahul

3,012159

answered Nov 23 '18 at 6:31

Rahul

3,012159

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

add a comment |

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

when width 10% then what happen ?
– Ravi Chauhan
Nov 23 '18 at 6:45

it will look small block
– Rahul
Nov 23 '18 at 6:51

add a comment |

Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class

answered Nov 23 '18 at 6:37

Alan Maldonado

138

add a comment |

Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class

answered Nov 23 '18 at 6:37

Alan Maldonado

138

add a comment |

Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class

answered Nov 23 '18 at 6:37

Alan Maldonado

138

Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class

answered Nov 23 '18 at 6:37

Alan Maldonado

138

answered Nov 23 '18 at 6:37

Alan Maldonado

138

answered Nov 23 '18 at 6:37

Alan Maldonado

138

answered Nov 23 '18 at 6:37

Alan Maldonado

138

add a comment |

This should help in centering the div horizontally!

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Lucifer

18111

add a comment |

This should help in centering the div horizontally!

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Lucifer

18111

add a comment |

This should help in centering the div horizontally!

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Lucifer

18111

This should help in centering the div horizontally!

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <style>

      .pretty-button {

        color: white;

        background-color: rgba(17, 175, 29, 0.64);

        border-radius: 0.6em;

        border: 0.2em solid #73AD21;

        padding: 0.5em;

      }



      .top-block {

        position: absolute;

        top: 0px;

        height: 30px;

        width: 60%;

        background-color: purple;

        left: 20%;

      }

    </style>

  </head>

  <body>

    <button class="pretty-button">Button A</button>

    <div id="div1">

      <div id="div2">

        <div id="div3" class="top-block">

        </div>

      </div>

    </div>

  </body>

</html>

answered Nov 23 '18 at 6:41

Lucifer

18111

answered Nov 23 '18 at 6:41

Lucifer

18111

answered Nov 23 '18 at 6:41

Lucifer

18111

answered Nov 23 '18 at 6:41

Lucifer

18111

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi