为什么此内联块未居中？

debugcn 发表于 Dev

萨赫里亚·塞卡特

检查一下，我试图居中放置此内联代码块，但它不起作用:(。我读了几个有关类似问题的答案，但解决方案；添加宽度和居中文本不起作用。波纹管是代码。

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>

每萨尔巴克

为了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-element便可以充当包装程序，告诉其中的所有内容居中。不仅如此，您还可以将按钮的样式仅应用于<a/>-tag。

编辑2：

对于每个人都建议额外的包装div。请不要。该链接已经有一个包装器，并且此HTML具有正确数量的元素（我什至会争论太多）。它仍然有大约100％的CSS类太多...

与问题无关：此布局实际上看起来像一张桌子。<table/>如果内容实际上应该是数据表，那么避免使用-tag毫无意义。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。