troubleshooting Question

CSS/HTML - how to responsively center buttons on all devices

Avatar of weikelbob
weikelbobFlag for United States of America asked on
CSSHTMLResponsive Web
7 Comments2 Solutions220 ViewsLast Modified:
Hello,

How do we responsively center these category buttons on all devices?

It's the shop by category buttons on this page:  http://www.usamedicalgloves.com

<div id="shop-by-category-home">
  <div class="header-home-categories">Shop By Category</div></div>
<div class="buttons-home">
  <div class="category-home"><a href="http://www.usamedicalgloves.com/disposable-nitrile-gloves.html"><img src="/assets/images/nitrile-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/latex-gloves"><img src="/assets/images/latex-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/vinyl-gloves"><img src="/assets/images/vinyl-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/medical-gloves"><img src="/assets/images/medical.jpg" /></a></div>
  <div class="category-home"><a href="/latex-free-gloves"><img src="/assets/images/latex-free.jpg" /></a></div>
  <div class="category-home"><a href="/powdered-gloves"><img src="/assets/images/powdered.jpg" /></a></div>
  <div class="category-home"><a href="http://www.usamedicalgloves.com/synthetic-gloves"><img src="/assets/images/synthetic.jpg" /></a></div>
  <div class="category-home"><a href="/sterile-gloves"><img src="/assets/images/sterile.jpg" /></a></div>
  <div class="category-home"><a href="/cheap-disposable-gloves"><img src="/assets/images/cheap.jpg" /></a></div>
  <div class="category-home"><a href="/lab-gloves"><img src="/assets/images/lab.jpg" /></a><a></a></div>
  <div class="category-home"><a href="/powderless-gloves"><img src="/assets/images/powderless.jpg" /></a></div>
  <div class="category-home"><a href="/food-gloves-latex-and-non-latex"><img src="/assets/images/food.jpg" /></a></div>
  <div class="category-home"><a href="/examination-gloves"><img src="/assets/images/exam.jpg" /></a></div>
  <div class="category-home"><a href="/small-disposable-gloves"><img src="/assets/images/xs.jpg" /></a></div>
  <div class="category-home"><a href="/large-disposable-gloves"><img src="/assets/images/xxl.jpg" /></a></div></div>

#shop-by-category-home
{
width:100%;
text-align:center;
margin-top:-23px;
}

.header-home-categories
{
width:100%;
font-size:28px;
color:#747474;
text-align:center;
padding:15px 15px;
}

.category-home
{
float:left;
padding:15px 15px;
}

.category-home
{
float:left;
padding:13px 13px;
}

.buttons-home
{
text-align:center;
}
ASKER CERTIFIED SOLUTION
HainKurt
Sr. System Analyst

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros