• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 97
  • Last Modified:

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

0
weikelbob
Asked:
weikelbob
  • 4
  • 2
2 Solutions
 
HainKurtSr. System AnalystCommented:
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;"
0
 
weikelbobAuthor 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

0
 
ecarboneCommented:
try using "margin: 0 auto;"
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
weikelbobAuthor 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

0
 
HainKurtSr. System AnalystCommented:
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...
0
 
weikelbobAuthor Commented:
Worked! Thanks!
0
 
weikelbobAuthor Commented:
Great work guys!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now