How can I position this block at top of page, but horizontally centered?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
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.
<!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 AliSaqib Ali
1,0041362150
add a comment |
1
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.
<!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 AliSaqib Ali
1,0041362150
add a comment |
1
1
1
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.
<!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 AliSaqib Ali
1,0041362150
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.
<!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
html css
asked Nov 23 '18 at 6:26
Saqib AliSaqib Ali
1,0041362150
asked Nov 23 '18 at 6:26
Saqib AliSaqib Ali
1,0041362150
asked Nov 23 '18 at 6:26
Saqib AliSaqib Ali
1,0041362150
asked Nov 23 '18 at 6:26
Saqib AliSaqib Ali
1,0041362150
asked Nov 23 '18 at 6:26
Saqib AliSaqib Ali
1,0041362150
1,0041362150
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
0
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 PolraChandresh Polra
1715
add a comment |
1
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
RahulRahul
3,302159
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 |
0
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
add a comment |
0
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
LuciferLucifer
339312
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 PolraChandresh Polra
1715
add a comment |
0
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 PolraChandresh Polra
1715
add a comment |
0
0
0
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 PolraChandresh Polra
1715
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 PolraChandresh Polra
1715
answered Nov 23 '18 at 6:41
Chandresh PolraChandresh Polra
1715
answered Nov 23 '18 at 6:41
Chandresh PolraChandresh Polra
1715
answered Nov 23 '18 at 6:41
Chandresh PolraChandresh Polra
1715
1715
add a comment |
add a comment |
1
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
RahulRahul
3,302159
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 |
1
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
RahulRahul
3,302159
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 |
1
1
1
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
RahulRahul
3,302159
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
RahulRahul
3,302159
answered Nov 23 '18 at 6:31
RahulRahul
3,302159
answered Nov 23 '18 at 6:31
RahulRahul
3,302159
answered Nov 23 '18 at 6:31
RahulRahul
3,302159
3,302159
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
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
it will look small block
– Rahul
Nov 23 '18 at 6:51
add a comment |
0
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
add a comment |
0
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
add a comment |
0
0
0
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
answered Nov 23 '18 at 6:37
Alan MaldonadoAlan Maldonado
158
158
add a comment |
add a comment |
0
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
LuciferLucifer
339312
add a comment |
0
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
LuciferLucifer
339312
add a comment |
0
0
0
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
LuciferLucifer
339312
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
LuciferLucifer
339312
answered Nov 23 '18 at 6:41
LuciferLucifer
339312
answered Nov 23 '18 at 6:41
LuciferLucifer
339312
answered Nov 23 '18 at 6:41
LuciferLucifer
339312
339312
add a comment |
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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
