Centering an element without taking bullet point into accountNeed an unordered list without any bulletsHow...
Personal Teleportation as a Weapon
Can I Retrieve Email Addresses from BCC?
I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?
Tiptoe or tiphoof? Adjusting words to better fit fantasy races
How was Earth single-handedly capable of creating 3 of the 4 gods of chaos?
Can a monster with multiattack use this ability if they are missing a limb?
Failed to fetch jessie backports repository
Understanding "audieritis" in Psalm 94
Confused about a passage in Harry Potter y la piedra filosofal
Should my PhD thesis be submitted under my legal name?
is this a spam?
Can criminal fraud exist without damages?
What does this 7 mean above the f flat
Can I use my Chinese passport to enter China after I acquired another citizenship?
when is out of tune ok?
Is HostGator storing my password in plaintext?
Centering an <li> element without taking bullet point into account
Using parameter substitution on a Bash array
What is the intuitive meaning of having a linear relationship between the logs of two variables?
What's the purpose of "true" in bash "if sudo true; then"
Trouble understanding overseas colleagues
Go Pregnant or Go Home
Is the destination of a commercial flight important for the pilot?
Implement the Thanos sorting algorithm
Centering an
Need an unordered list without any bulletsHow to center absolutely positioned element in div?Center a position:fixed elementHTML href with css ie ProblemVertical alignment of elements overlapping in IECSS - Excess space on the rightHow to center a “position: absolute” elementGridView Lines Not Showing up in IECreating a two-column-100% layout with BootstrapInvalid css style during zooming in calendar
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 flexbox centering
edited 41 mins ago
kukkuz
29.1k62869
asked 3 hours ago
SteelSteel
705
add a comment |
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 flexbox centering
edited 41 mins ago
kukkuz
29.1k62869
asked 3 hours ago
SteelSteel
705
2
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
3 hours ago
1
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago
add a comment |
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
html css css3 flexbox centering
edited 41 mins ago
kukkuz
29.1k62869
asked 3 hours ago
SteelSteel
705
I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>html css css3 flexbox centering
html css css3 flexbox centering
edited 41 mins ago
kukkuz
29.1k62869
asked 3 hours ago
SteelSteel
705
edited 41 mins ago
kukkuz
29.1k62869
asked 3 hours ago
SteelSteel
705
edited 41 mins ago
kukkuz
29.1k62869
edited 41 mins ago
kukkuz
29.1k62869
edited 41 mins ago
kukkuz
29.1k62869
29.1k62869
asked 3 hours ago
SteelSteel
705
asked 3 hours ago
SteelSteel
705
asked 3 hours ago
SteelSteel
705
705
2
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
3 hours ago
1
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago
add a comment |
2
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just setmargin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.
– ryantdecker
3 hours ago
1
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago
2
2
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
3 hours ago
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0; and padding:0; to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
3 hours ago
1
1
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago
add a comment |
3 Answers
3
active
oldest
votes
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
kukkuzkukkuz
29.1k62869
add a comment |
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
add a comment |
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered 2 hours ago
AkborAkbor
42456
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
});
}
});
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%2f55369205%2fcentering-an-li-element-without-taking-bullet-point-into-account%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
kukkuzkukkuz
29.1k62869
add a comment |
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
kukkuzkukkuz
29.1k62869
add a comment |
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
kukkuzkukkuz
29.1k62869
It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:
Ideally you should just reset the padding instead of negative margins - see demo below:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none; /* hide bullet points */
padding-left: 0; /* ADDED */
}
li {
margin-top: 40px;
padding-left: 75px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
kukkuzkukkuz
29.1k62869
edited 3 hours ago
answered 3 hours ago
kukkuzkukkuz
29.1k62869
answered 3 hours ago
kukkuzkukkuz
29.1k62869
answered 3 hours ago
kukkuzkukkuz
29.1k62869
29.1k62869
add a comment |
add a comment |
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
add a comment |
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
add a comment |
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>list-style-type: none on the <ul> is optional.
#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>#square {
position: fixed;
width: 350px;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(230, 255, 230);
}
ul {
position: relative;
bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
}
li {
margin-top: 40px;
margin-left: -40px;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
list-style-type: none;
}
.navlink {
text-decoration: none;
color: white;
}<div id="square">
<ul>
<li><a class="navlink" href="#">Introduction</a></li>
<li><a class="navlink" href="#">Middle</a></li>
<li><a class="navlink" href="#">End</a></li>
</ul>
</div>answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
answered 3 hours ago
Obsidian AgeObsidian Age
28.4k72345
28.4k72345
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
add a comment |
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
2
2
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
This works, thank you. But how did you know margin added by the bullet points was 40px?
– Steel
3 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI.
– ryantdecker
2 hours ago
add a comment |
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered 2 hours ago
AkborAkbor
42456
add a comment |
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered 2 hours ago
AkborAkbor
42456
add a comment |
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered 2 hours ago
AkborAkbor
42456
Your given code almost ok just use one single line into style sheet
in li style use below line
list-style-type: none;
New li style look like
li {
margin-top: 40px;
padding-left: 75px;
list-style-type: none;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 5px 20px 5px 20px;
background-color: green;
border-radius: 10px;
width: 100px;
text-align: center;
}
answered 2 hours ago
AkborAkbor
42456
answered 2 hours ago
AkborAkbor
42456
answered 2 hours ago
AkborAkbor
42456
answered 2 hours ago
AkborAkbor
42456
42456
add a comment |
add a comment |
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.
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%2f55369205%2fcentering-an-li-element-without-taking-bullet-point-into-account%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
2
most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set
margin:0;andpadding:0;to your ul and li styles, you should be able to then align or space it however you prefer.– ryantdecker
3 hours ago
1
'which I do not want' - bullet points or the space taken, or both?
– Vega
2 hours ago