Centering text and buttons under imagesHow to horizontally center a <div>?How to vertically center a div for all browsers?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to center absolutely positioned element in div?Center image using text-align center?How to vertically align an image inside a div?How do I vertically center text with CSS?Center a column using Twitter Bootstrap 3
Can an x86 CPU running in real mode be considered to be basically an 8086 CPU?
Approximately how much travel time was saved by the opening of the Suez Canal in 1869?
Type 1 Error & Type 2 Error's pregnancy test analogy: is it legit?
I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine
Why can't I see bouncing of a switch on an oscilloscope?
How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?
Did Shadowfax go to Valinor?
Animated Series: Alien black spider robot crashes on Earth
Why Is Death Allowed In the Matrix?
How can bays and straits be determined in a procedurally generated map?
Magento 2: Admin panel 3 level menu structure not working
What is the difference between 元 (圓), 幣, and 金?
Why are weather verbs 曇る and 晴れる treated differently in this sentence?
Is the month field really deprecated?
Writing rule which states that two causes for the same superpower is bad writing
How old can references or sources in a thesis be?
How to say job offer in Mandarin/Cantonese?
What are these boxed doors outside store fronts in New York?
Does the fruit of Mantra Japa automatically go to Indra if Japa Samarpana Mantra is not chanted?
Is it unprofessional to ask if a job posting on GlassDoor is real?
How to test if a transaction is standard without spending real money?
Mathematical cryptic clues
Shell script not opening as desktop application
How much RAM could one put in a typical 80386 setup?
Centering text and buttons under images
How to horizontally center a <div>?How to vertically center a div for all browsers?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to center absolutely positioned element in div?Center image using text-align center?How to vertically align an image inside a div?How do I vertically center text with CSS?Center a column using Twitter Bootstrap 3
.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 center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>css html5
asked Mar 9 at 3:16
SilkSilk
366
add a comment |
1
I am trying to center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>css html5
asked Mar 9 at 3:16
SilkSilk
366
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47
add a comment |
1
1
1
I am trying to center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>css html5
asked Mar 9 at 3:16
SilkSilk
366
I am trying to center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main> figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main> figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
figure figcaption
display: inline-block;
float: left;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>css html5
css html5
asked Mar 9 at 3:16
SilkSilk
366
asked Mar 9 at 3:16
SilkSilk
366
asked Mar 9 at 3:16
SilkSilk
366
asked Mar 9 at 3:16
SilkSilk
366
asked Mar 9 at 3:16
SilkSilk
366
366
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47
add a comment |
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47
add a comment |
3 Answers
3
active
oldest
votes
2
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>answered Mar 9 at 3:54
NickNick
8721317
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
add a comment |
0
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
add a comment |
0
I hope this helps! I have used flex and wrapped a div around each element
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
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%2f55073653%2fcentering-text-and-buttons-under-images%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
2
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>answered Mar 9 at 3:54
NickNick
8721317
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
add a comment |
2
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>answered Mar 9 at 3:54
NickNick
8721317
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
add a comment |
2
2
2
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>answered Mar 9 at 3:54
NickNick
8721317
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>figure
text-align: center;
width: 20%;
float: left;
img
max-width: 100px;
border: 10px solid #a8eb6c
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>answered Mar 9 at 3:54
NickNick
8721317
edited Mar 9 at 4:16
answered Mar 9 at 3:54
NickNick
8721317
answered Mar 9 at 3:54
NickNick
8721317
answered Mar 9 at 3:54
NickNick
8721317
8721317
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
add a comment |
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
Thank you so much! This worked! The only thing now is that all the images are side by side without any space in between. Margin does not seem to fix this problem.
– Silk
Mar 9 at 6:13
add a comment |
0
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
add a comment |
0
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
add a comment |
0
0
0
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>.centerContent
text-align: center;
vertical-align: top;
figure
display: inline-block;
figure .centerContent
width: 28%;
display: inline-block;
figure div img
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
figcaption
figure div button
background-color: #a8eb6c;
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
edited Mar 9 at 4:03
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
answered Mar 9 at 3:47
Miroslav GlamuzinaMiroslav Glamuzina
2,11711023
2,11711023
add a comment |
add a comment |
0
I hope this helps! I have used flex and wrapped a div around each element
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
add a comment |
0
I hope this helps! I have used flex and wrapped a div around each element
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
add a comment |
0
0
0
I hope this helps! I have used flex and wrapped a div around each element
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
I hope this helps! I have used flex and wrapped a div around each element
figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main> figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main> figure img
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
figure figcaption
display: inline-block;
text-align: center;
figcaption
font-size: 17px;
margin: 30px 110px 30px 60px;
figure button
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
.container
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.center
text-align: center;
.main_container
display: flex;
justify-content: center;
align-content: center;
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
edited Mar 9 at 4:04
answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
answered Mar 9 at 3:57
sambasiva raosambasiva rao
1386
1386
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%2f55073653%2fcentering-text-and-buttons-under-images%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
can you share image, what you exactly want?
– Sarabjit Singh
Mar 9 at 3:47