html - どうすれば中央に配置できますか水平に？

Question

<ul>水平方向に中央揃えするにはどうすればよいですか?

下線付きのリストがありますが、左に配置されているようで、中央に配置したいと考えています。

<ul id="give-donation-level-button-wrap" class="give-donation-levels-wrap give-list-inline">
<li><button type="button" data-price-id="1" class=" give-donation-level-btn give-btn give-btn-level-1 give-default-level" value="25.00">$25</button></li>
<li><button type="button" data-price-id="2" class=" give-donation-level-btn give-btn give-btn-level-2 " value="50.00">$50</button></li>
<li><button type="button" data-price-id="3" class=" give-donation-level-btn give-btn give-btn-level-3 " value="75.00">$75</button></li>
</ul>

また、クリックしたときに選択した金額ボタンに黄色い枠線を付けるにはどうすればよいですか?

http://74.220.215.60/~xthrdmac/green/home-4-2/

Answer 1

水平マージンを に設定して整列するだけautoです。

ul {
    display: block;
    margin: 0 auto;
}

内のリスト項目を中央に配置する場合はul、次を使用します。

ul {
    text-align: center;
}

ul > li {
    display: inline-block;
}

あなたが参照しているサイトでは、リストではなくアイテムが必要です。

Answer 2

次の変更を行います。

#give-donation-level-button-wrap > li {
  /* float: left; <-- remove*/
  display: inline-block; /* <-- add */ 
}

Answer 3

これをcssに貼り付けるだけです

 #give-donation-level-button-wrap > li {
    display: inline-block;
    float: none;
 }

Answer 4

ul 要素を div に配置し、「text-align: center;」を使用します。divの小道具。箇条書きはあなたが望まない方法で表示されますが、"style: none;" という小道具を使用してください。リストのために。またはスタイルを適用する

div{
           margin-left: 50%;   
}