Mixing
Unordered List in CSS will not center
https://jsfiddle.net/nathanahartmann/5shg6vn7/3/
So I've been trying to get this Unordered List centered. The text-align:center; worked correctly but the items within the list (the pictures and text) for the main content of the page. I just want it to be perfectly centered. I've tried getting rid of padding and margins. I've tried margin: 0px auto;. I can't seem to figure out what I need to do to get this UL to align.
.mainImage{
height:275px;
width:275px;
}
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li{
padding:0px;
display:inline-block;
float:left;
height:350px;
width:100%;
}
html css list html-lists center
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
add a comment |
https://jsfiddle.net/nathanahartmann/5shg6vn7/3/
So I've been trying to get this Unordered List centered. The text-align:center; worked correctly but the items within the list (the pictures and text) for the main content of the page. I just want it to be perfectly centered. I've tried getting rid of padding and margins. I've tried margin: 0px auto;. I can't seem to figure out what I need to do to get this UL to align.
.mainImage{
height:275px;
width:275px;
}
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li{
padding:0px;
display:inline-block;
float:left;
height:350px;
width:100%;
}
html css list html-lists center
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25
add a comment |
https://jsfiddle.net/nathanahartmann/5shg6vn7/3/
So I've been trying to get this Unordered List centered. The text-align:center; worked correctly but the items within the list (the pictures and text) for the main content of the page. I just want it to be perfectly centered. I've tried getting rid of padding and margins. I've tried margin: 0px auto;. I can't seem to figure out what I need to do to get this UL to align.
.mainImage{
height:275px;
width:275px;
}
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li{
padding:0px;
display:inline-block;
float:left;
height:350px;
width:100%;
}
html css list html-lists center
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
https://jsfiddle.net/nathanahartmann/5shg6vn7/3/
So I've been trying to get this Unordered List centered. The text-align:center; worked correctly but the items within the list (the pictures and text) for the main content of the page. I just want it to be perfectly centered. I've tried getting rid of padding and margins. I've tried margin: 0px auto;. I can't seem to figure out what I need to do to get this UL to align.
.mainImage{
height:275px;
width:275px;
}
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li{
padding:0px;
display:inline-block;
float:left;
height:350px;
width:100%;
}
html css list html-lists center
html css list html-lists center
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
asked Jan 2 at 2:18
nathan hartmannnathan hartmann
287
287
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25
add a comment |
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25
add a comment |
3 Answers
3
active
oldest
votes
User agent styles adds a padding-inline-start: 40px to ul elements.
I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
change it to this
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
This will target the correct element and correct your alignment issue
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
add a comment |
.mainImage remains the same
.mainImage{
height:275px;
width:275px;
}
in .mainImageUl ul would change to .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li you should use margin only if you only want to achieve a space between each image
.mainImageUl li{
margin: 30px 0;
}
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
add a comment |
Try to clear browser css setting before adding yours
also it is better to share complete style sheet we should know if there is conflict or inheritance
answered Jan 2 at 6:34
frezierfrezier
11
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%2f54000514%2funordered-list-in-css-will-not-center%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
User agent styles adds a padding-inline-start: 40px to ul elements.
I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
change it to this
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
This will target the correct element and correct your alignment issue
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
add a comment |
User agent styles adds a padding-inline-start: 40px to ul elements.
I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
change it to this
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
This will target the correct element and correct your alignment issue
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
add a comment |
User agent styles adds a padding-inline-start: 40px to ul elements.
I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
change it to this
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
This will target the correct element and correct your alignment issue
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
User agent styles adds a padding-inline-start: 40px to ul elements.
I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
change it to this
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
This will target the correct element and correct your alignment issue
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
edited Jan 2 at 2:42
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
answered Jan 2 at 2:31
I. JohnsonI. Johnson
1687
1687
add a comment |
add a comment |
.mainImage remains the same
.mainImage{
height:275px;
width:275px;
}
in .mainImageUl ul would change to .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li you should use margin only if you only want to achieve a space between each image
.mainImageUl li{
margin: 30px 0;
}
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
add a comment |
.mainImage remains the same
.mainImage{
height:275px;
width:275px;
}
in .mainImageUl ul would change to .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li you should use margin only if you only want to achieve a space between each image
.mainImageUl li{
margin: 30px 0;
}
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
add a comment |
.mainImage remains the same
.mainImage{
height:275px;
width:275px;
}
in .mainImageUl ul would change to .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li you should use margin only if you only want to achieve a space between each image
.mainImageUl li{
margin: 30px 0;
}
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
.mainImage remains the same
.mainImage{
height:275px;
width:275px;
}
in .mainImageUl ul would change to .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li you should use margin only if you only want to achieve a space between each image
.mainImageUl li{
margin: 30px 0;
}
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
answered Jan 2 at 4:02
Maria Fernanda SegoviaMaria Fernanda Segovia
213
213
add a comment |
add a comment |
Try to clear browser css setting before adding yours
also it is better to share complete style sheet we should know if there is conflict or inheritance
answered Jan 2 at 6:34
frezierfrezier
11
add a comment |
Try to clear browser css setting before adding yours
also it is better to share complete style sheet we should know if there is conflict or inheritance
answered Jan 2 at 6:34
frezierfrezier
11
add a comment |
Try to clear browser css setting before adding yours
also it is better to share complete style sheet we should know if there is conflict or inheritance
answered Jan 2 at 6:34
frezierfrezier
11
Try to clear browser css setting before adding yours
also it is better to share complete style sheet we should know if there is conflict or inheritance
answered Jan 2 at 6:34
frezierfrezier
11
answered Jan 2 at 6:34
frezierfrezier
11
answered Jan 2 at 6:34
frezierfrezier
11
answered Jan 2 at 6:34
frezierfrezier
11
11
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%2f54000514%2funordered-list-in-css-will-not-center%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
Is using flexbox an option for you?
– fauverism
Jan 2 at 2:25