once again I have a problem with centering elements. I have this HTML/CSS:
<section class="btmfix">
<div class="menurow">
<div class="col">
<a class="sml-btn" href="index.html">HOME</a>
</div>
<div class="col">
<a class="sml-btn" href="about.html">ABOUT</a>
</div>
<div class="col">
<a class="sml-btn" href="product.html">PRODUCT</a>
</div>
<div class="col">
<a class="sml-btn" href="request.php">REQUEST</a>
</div>
<div class="col">
<a class="sml-btn" href="contact.html">CONTACT</a>
</div>
</div>
</section>
.menurow {
height: auto;
display: inline-block;
margin: 0 auto;
width: auto;
}
.btmfix {
display: block;
padding-bottom: 0px;
}
.col {
padding: 0px;
display: block;
}
.sml-btn {
color: #000;
text-decoration:none;
background-color:#444;
margin: 3px;
width: 180px !important;
/* width:auto !important;*/
padding: .3rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
display: inline-block;
/* font-weight: 00;*/
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
cursor: pointer;
text-transform: uppercase;
text-shadow: 1px 0px #fff;
}
https://jsfiddle.net/crapomat/pLt5j0sy/5/
I want the links to be centered, but I cant figure out how. I tried the margin: 0 auto; method, this is found in almost every tutorial, but it doesn't work here. Do you know why? Can you help me?
Thx in advance
To center menu horizontally you need to apply text-align: center;
on .col
class.
Here is the working example:
.menurow {}
.btmfix {
display: block;
padding-bottom: 0px;
}
.col {
padding: 0px;
text-align: center;
}
.sml-btn {
color: #000;
text-decoration:none;
background-color:#444;
margin: 3px;
width: 180px !important;
padding: .3rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
display: inline-block;
text-align: center;
vertical-align: middle;
border: 1px solid #fff;
cursor: pointer;
text-transform: uppercase;
text-shadow: 1px 0px #fff;
}
<section class="btmfix">
<div class="menurow">
<div class="col">
<a class="sml-btn" href="index.html">HOME</a>
</div>
<div class="col">
<a class="sml-btn" href="about.html">ABOUT</a>
</div>
<div class="col">
<a class="sml-btn" href="product.html">PRODUCT</a>
</div>
<div class="col">
<a class="sml-btn" href="request.php">REQUEST</a>
</div>
<div class="col">
<a class="sml-btn" href="contact.html">CONTACT</a>
</div>
</div>
</section>