(WordPress) How do I center galleries?
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
css wordpress gallery
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
add a comment |
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
css wordpress gallery
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
add a comment |
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
css wordpress gallery
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
css wordpress gallery
css wordpress gallery
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
asked Nov 12 '18 at 20:48
ovidiuavovidiuav
94
94
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
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%2f53269870%2fwordpress-how-do-i-center-galleries%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
add a comment |
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
add a comment |
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
answered Nov 12 '18 at 21:01
Georgios DimitriadisGeorgios Dimitriadis
517310
517310
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
add a comment |
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
Thank you so much, that worked! I didn't like it because it just looked incomplete, like the last image was missing. Maybe you can help me with something else? As you can see, the hyperlinks exceed the images (for example you can open images even when clicking between them, or if I have a gallery with only one image, the hyperlink extends both left and right of the image for the whole length of the content). Do you know how I could only have the images themselves be clickable? Thank you!
– ovidiuav
Nov 12 '18 at 21:26
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
You have to think of how to build the DOM. Basically you need to put the border around the image on the element outside of the anchor tag. Cheers!
– Georgios Dimitriadis
Nov 13 '18 at 21:18
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%2f53269870%2fwordpress-how-do-i-center-galleries%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
