Question

text-align：center无法使我的按钮居中。我也试过“margin：0px auto”，但这也没用。我只是试图在页面中间垂直堆叠按钮，它们之间有一个小空间。我该怎么做？

<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
margin:0px auto;
background-image:url("one1.jpg");
background-repeat:repeat-x;
}

.bf_button {  
  display:block; 
  background: url(bf_button_fon_right.gif) no-repeat 100%; 
  float: left; 
  outline: none; 
  padding-right: 32px; 
  text-decoration: none; 
 } 

.bf_button:hover {  
  text-decoration: none; 
} 

.bf_button span{  
  display:block; 
  background: url(bf_button_fon_left.gif) no-repeat;  
  white-space: nowrap; 
  line-height: 74px; 
  padding: 0 0 0 32px; 
  font-family: Arial, Verdana; 
  font-size: 34px; 
  font-weight: normal;  
  color: rgb(0,0,0);  
  text-transform: none;  
 }

</style>
</head>
<body>
<img src="one.jpg"></img>
</body>
<div style="text-align:center;">
<br /> <br /> <br />
<a href="http://" class="bf_button"><span>Time & Attendance (Kronos)</span></a>
<br /> <br /> <br />
<a href="http://"  class="bf_button"><span>401K</span></a>
<br /> <br /> <br />
<a href="http://www.bcbsil.com/"  class="bf_button"><span>Medical: </span></a>
<br /> <br /> <br />
<a href="https://"  class="bf_button"><span>Dental, Vision, Life, AD&D: </span></a>
<br /> <br /> <br />
<a href="https://"  class="bf_button"><span>Flex Programs: </span></a>
</div>
</html>

Answer 1

您将按钮浮动到左侧，这意味着它们会自然地向左移动。

从float: left;

.bf_button

向.bf_button添加静态宽度（因为您将其定义为块）。
将margin: 0 auto;添加到.bf_button

最终的CSS定义应如下所示：

.bf_button {  
  display:block; 
  background: url(bf_button_fon_right.gif) no-repeat 100%; 
  outline: none;
  margin: 0 auto;
  padding-right: 32px; 
  text-decoration: none;
  width: 150px;
 }

将按钮设置为<br /> <br /> <br />时，您也可以删除不需要的display: block;。块元素（或带有display：block的元素）将自动删除到新行和堆栈。要添加间距，只需在按钮上添加底部或上边距。

另一个说明。您过早关闭了<body>代码。您的</body>代码应直接位于</html>代码之前。

页面上的中心按钮

1 个答案: