Question

Check this out我试图将这个内联块集中在一起，但它不起作用:(。我读了几个关于类似问题的答案，但是解决方案;添加宽度和居中文本不起作用。贝娄是代码。以上是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"><a href="">DOWNLOAD NOW</a>
  </div>
  <div class="footer">footer</div>
</div>

Answer 1

为了使text-align能够工作，您需要在容器上指定它，该容器又将具有居中文本。现在，您已在要居中的实际元素上设置了text-align: center。

编辑：

示例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;
}

这样就可以使你的.download - 元素作为一个awrapper工作，告诉它里面的每一个都是居中的。比它仅将按钮的样式应用于<a/> - 标记。

编辑2：

为每个人推荐额外的包装div。请不要。该链接已经有一个包装器，这个HTML有正确数量的元素（我甚至会争论太多）。它仍有大约100％的css类......

与问题无关：这个布局看起来真的像一张桌子。如果内容实际上应该是一个数据表，那么避免使用<table/> - 标记就没有意义。

Answer 2

Updated code

将text-align: center提供给父元素。

<强> HTML

<div class="center">
    <div class="download"><a href="">DOWNLOAD NOW</a></div>
</div>

<强> CSS

.center {
  text-align: center
}

Answer 3

将下载按钮包装在容器中，并为容器提供

text-align:center;

属性：

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"><a href="">DOWNLOAD NOW</a>
  </div>
  </div>
  <div class="footer">footer</div>
</div>

为什么这个内联块不是居中的？

3 个答案: