Question

我试图为朋友设计一个网站，我已经显示了按钮，但我似乎无法让它居中。

<section class="forums" id="forums">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<h3>Have A Suggestion? Post it in our forums!</h3>

<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
</div>

<div class="col-md-4" style="text-align: center;">
		<a class="button button-dark" href="#">
				<span class="button-text">
						<input name="Forum" type="button" value="Forums" />
				</span> 
		</a>
</div>
</body>
</html>

Answer 1

根据Bootstrap的网格系统，您可以通过更改班级

来实现

<div class="col-md-4">
   ...
</div>

到

<div class="col-md-4 col-md-offset-4">
   ...
</div>

完整代码：

<section class="forums" id="forums">
  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  </head>

  <body>
    <h3>Have A Suggestion? Post it in our forums!</h3>

    <div class="divider">
      <div class="hr">
        <div class="hr-dot"></div>
      </div>
    </div>
    </div>

    <div class="col-md-4 col-md-offset-4" style="text-align: center;">
      <a class="button button-dark" href="#">
        <span class="button-text">
						<input name="Forum" type="button" value="Forums" />
				</span> 
      </a>
    </div>
  </body>

  </html>

Answer 2

在代码段中，它居中！

确保你的div class =＆＃34; col-md-4＆＃34;是100％大，将宽度设置为100％。

如何在HTML中居中按钮？

2 个答案: