如何在 Html 中使按钮居中？ [复制]

Posted 2023-03-05

【中文标题】如何在 Html 中使按钮居中？ [复制]

【英文标题】：How to center a button in Html? [duplicate]

【发布时间】：2021-06-12 12:24:34

【问题描述】：

为什么我可以在 html 上对齐这个按钮，你通常会放一个 text-align: center a tat all。我不知道是我做错了什么还是什么。

<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<button href="https://mediassegur.com/proteger-para-progresar" style="text-align:center;">Leer mas</button>
</div>

谢谢。

【参考方案1】：

只需使用边距即可。

button 
  width: auto;
  display: block;
  margin: auto;

<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<button href="https://mediassegur.com/proteger-para-progresar">Leer mas</button>
</div>

【参考方案2】：

在一个<div>中添加button并在div中添加text-align:center

<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
  <h2>Proteger para progresar</h2>
  <h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
  <div style="text-align:center;"><button href="https://mediassegur.com/proteger-para-progresar">Leer mas</button></div>
</div>