asked on 11/3/2017

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

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

CSS HTML Responsive Web

Last Comment

weikelbob

11/4/2017

ASKER CERTIFIED SOLUTION

HainKurt

11/3/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

weikelbob

11/3/2017

ASKER

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

SOLUTION

E C

11/3/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

weikelbob

11/3/2017

ASKER

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

HainKurt

11/4/2017

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...

weikelbob

11/4/2017

ASKER

Worked! Thanks!

weikelbob

11/4/2017

ASKER

Great work guys!