Düğme Merkezi CSS

Genel CSS merkezleme sorunu, benim için çalışmıyor, sorun şu ki bitmiş genişlik pikselini bilmiyorum

Tüm gezinti için bir div'im var ve sonra içindeki her düğme, birden fazla düğme olduğunda artık ortalamıyorlar. :(

CSS

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

.nav_button{
    height:34px;
    margin:0 auto;
    margin-right:10px;
    float:left;
}

HTML

<div class="nav">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>

        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>

        </div>
</div>

Herhangi bir yardım çok takdir edilecektir. Teşekkürler

Sonuç

Genişlik bilinmiyorsa, düğmeleri ortalamanın bir yolunu buldum, tamamen mutlu değil ama önemli değil, işe yarıyor: D

En iyi yol bir masaya koymaktır

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>

Bunun çok eski bir soru olduğunun farkındayım, ancak bugün bu soruna rastladım ve onunla birlikte çalıştım

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

Şerefe, Mark

Sorunu çözmek için bunu CSS'nize eklemeyi düşünün:

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

Başka bir güzel seçenek de kullanmaktır:

width: 40%;
margin-left: 30%;
margin-right: 30%

Sorun şu CSS satırında .nav_button:

margin: 0 auto;

Bu, yalnızca bir düğmeniz varsa işe yarar, bu yüzden birden fazla nav_buttondiv olduğunda merkezden kaymışlardır.

Tüm düğmelerinizin ortalanmış olmasını istiyorsanız nav_buttons, başka bir div öğesinin içine yerleştirin:

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

Ve bu şekilde şekillendirin:

.nav{
    margin-top:167px;
    width:1024px;
    height:34px;
}

/* Centers the div that nests the nav_buttons */
.centerButtons {
    margin: 0 auto;
    float: left;
} 

.nav_button{
    height:34px;
    margin-right:10px;
    float: left;
}

Sorunu çözmek için bunu CSS'nize eklemeyi düşünün:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

her şey başarısız olduğunda ben sadece

<center> content </center>

Artık "standartlara uygun" olmadığını biliyorum, ancak işe yararsa işe yarıyor