Why This inline block is not centering? - css

Question

Check this out I tried to center this inline-block but it is not working :( . I read couple of answer about similar issue but the solution; adding width and centering text is not working. Bellow is the codes. above is the codepen.
HTML:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download">DOWNLOAD NOW
</div>
<div class="footer">footer</div>
</div>

Answer 1

In order for text-align to work you need to specify it on a container, that container, in turn, will have centered text. Right now you have set text-align: center on the actual element you want centered.
EDIT:
Sample css:
.download {
text-align: center;
}
.download a {
color: #ffffff;
text-decoration: none;
width: 220px;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
This makes it so your .download-element works as awrapper telling everyting inside it to be centered. Than it applies your styling of the button to the <a/>-tag only.
EDIT 2:
For everyone recommending additional wrapper divs. Please don't. The link already has a wrapper and this HTML has the correct amount of elements (I would even argue one too many). It still has about 100% too many css-classes...
Unrelated to the question: This layout really looks like a table. No point in avoiding the <table/>-tag if the content is actually supposed to be a table of data.

Answer 2

Updated code
Give text-align: center to a parent element.
HTML
<div class="center">
<div class="download">DOWNLOAD NOW</div>
</div>
CSS
.center {
text-align: center
}

Answer 3

Wrap your download button in a container, and give the container the
text-align:center;
property:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
.download-container{
text-align:center;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download-container">
<div class="download">DOWNLOAD NOW
</div>
</div>
<div class="footer">footer</div>
</div>