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

weikelbob
weikelbob used Ask the Experts™
on
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>

Open in new window


#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;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sr. System Analyst
Commented:
try this

http://jsfiddle.net/c2wqLn36/

.buttons-home {
  border: 1px solid red;
  text-align: center;
}

.category-home {
  width: 100px;
  height: 100px;
  //float: left;
  margin: 13px;
  border: 1px solid blue;
  display: inline-block;
}

Open in new window


ie: remove "float: left;" and use "display: inline-block;"

Author

Commented:
Couldn't get it to work:

www.usamedicalgloves.com

#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 {
  width: 178px;
  height: 178px;
  //float: left;
  margin: 13px;
  border: 1px solid blue;
  display: inline-block;
}

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

.buttons-home {
  border: 1px solid red;
  text-align: center;
}

Open in new window


<div class="fb-like" data-href="https://www.facebook.com/usamedicalgloves/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true">&nbsp;</div>
<div id="shop-by-category-home" style="text-align:center">
  <div class="header-home-categories">Shop By Category</div></div>
<div class="buttons-home" style="text-align:center">
  <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>

Open in new window

try using "margin: 0 auto;"

Author

Commented:
No luck

#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;
margin: 0 auto;
}

.category-home {
  width: 178px;
  height: 178px;
  //float: left;
  margin: 13px;
  border: 1px solid blue;
  display: inline-block;
}

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

.buttons-home {
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
}

Open in new window


<div id="shop-by-category-home" style="text-align:center;margin:0 auto">
  <div class="header-home-categories">Shop By Category</div></div>
<div class="buttons-home" style="text-align:center;margin:0 auto"">
  <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>

Open in new window

HainKurtSr. System Analyst

Commented:
put width margin and display inline-block

.category-home {
    /* float: left; */
    /* padding: 13px 13px; */
    display: inline-block;
    width: 150px;
    margin: 15px;
}

Open in new window


as I did in my first post, and you should be good...

Author

Commented:
Worked! Thanks!

Author

Commented:
Great work guys!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial