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;
 }

<br /> <br /> <br />ボタンを に設定する場合は必要ないため、 を削除することもできますdisplay: block;。ブロック要素 (または display: block を持つ要素) は、自動的に新しい行にドロップされ、スタックされます。間隔を追加するには、ボタンに下マージンまたは上マージンを追加するだけです。

別のメモ。タグを閉じるのが<body>早すぎます。タグ</body>は、タグの直前にある必要があります</html>。

于 2013-03-19T18:27:52.793 に答える