Question

我正在尝试使用多种方法来使布局居中，但是仍然找不到最佳的布局方法。在下面的代码中，按钮rental不在中心。我认为是因为留有余量，但我什么也没找到。我一直在做一些事情要集中。请帮助如何做到最好。我可以在class =“ val”之间留个边距吗？

这是我的示例代码

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
  list-style-type: none;
    margin-top: 10px;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li{
  float: left;
}
li button {
  background-color: #008CBA;
}

 #pencetan{
   display: table;
  margin: 0 auto;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
<ul>
<a href="/details " class="button">Rental</a>
</div>

Answer 1

使用flexbox，对所有浏览器都很好的支持。

避免使用表格之类的静态显示。

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
    list-style-type: none;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li button {
  background-color: #008CBA;
}

 #pencetan{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
</ul>
<a href="/details " class="button">Rental</a>
</div>

Answer 2

您的代码将内容居中，因为您在margin: 0 auto上有#pencetan，因此此margin: 0 auto转换为以下内容：

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

关于您的问题，实际上取决于您要关注的内容。

要对齐文本，可以使用CSS text-align属性，请参阅：https://www.w3schools.com/cssref/pr_text_text-align.asp

text-align属性指定元素中文本的水平对齐方式

div.a {
    text-align: center;
}

要对齐容器，可以使用不同的方法，我会建议您看看CSS flexbox，请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可以轻松调整以下内容：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

甚至它的项目：

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
  list-style-type: none;
    margin-top: 10px;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li{
  float: left;
}
li button {
  background-color: #008CBA;
}

 #pencetan{
   display: table;
  margin: 0;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
<ul>
<a href="/details " class="button">Rental</a>
</div>

如何使东西居中的最佳方法

2 个答案: