0

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>
4

1 回答 1

2

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

  1. float: left;从_.bf_button
  2. 添加静态宽度.bf_button（因为您将其定义为块）。
  3. 添加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;
 }

You can also remove the <br /> <br /> <br /> as it's not needed when setting the buttons to display: block;. Block elements (or those with display: block) will automatically drop to a new line and stack. To add spacing, simply add a bottom or top margin to your buttons.

Another note. You are closing your <body> tag too soon. Your </body> tag should be directly before your </html> tag.

于 2013-03-19T18:27:52.793 回答