ปุ่มศูนย์ CSS

ปัญหาการตั้งศูนย์ CSS โดยทั่วไปไม่ได้ผลสำหรับฉันปัญหาคือฉันไม่ทราบความกว้าง px ที่เสร็จสิ้นแล้ว

ฉันมี div สำหรับการนำทางทั้งหมดแล้วแต่ละปุ่มภายในพวกเขาจะไม่อยู่ตรงกลางอีกต่อไปเมื่อมีปุ่มมากกว่าหนึ่งปุ่ม :(

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>

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. ขอบคุณ

ผลลัพธ์

หากไม่ทราบความกว้างฉันพบวิธีที่จะทำให้ปุ่มอยู่ตรงกลางไม่ค่อยมีความสุข แต่ก็ไม่สำคัญมันใช้งานได้: D

วิธีที่ดีที่สุดคือวางไว้ในตาราง

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

ฉันรู้ว่านี่เป็นคำถามที่เก่ามาก แต่วันนี้ฉันเจอปัญหานี้และได้ผลแล้ว

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

ไชโยมาร์ค

พิจารณาเพิ่มสิ่งนี้ใน CSS ของคุณเพื่อแก้ไขปัญหา:

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

อีกทางเลือกหนึ่งที่ดีคือการใช้:

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

ปัญหาเกิดจากบรรทัด CSS ต่อไปนี้บน.nav_button:

margin: 0 auto;

วิธีนี้จะใช้ได้ผลก็ต่อเมื่อคุณมีปุ่มเดียวนั่นคือสาเหตุที่ปุ่มเหล่านั้นไม่อยู่ตรงกลางเมื่อมีnav_buttonDiv มากกว่าหนึ่ง

หากคุณต้องการให้ปุ่มทั้งหมดอยู่ตรงกลางnav_buttonsใน div อื่น:

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

และจัดสไตล์ด้วยวิธีนี้:

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

พิจารณาเพิ่มสิ่งนี้ใน CSS ของคุณเพื่อแก้ไขปัญหา:

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

เมื่อทุกอย่างล้มเหลวฉันก็แค่

<center> content </center>

ฉันรู้ว่ามันไม่ "ถึงมาตรฐาน" อีกต่อไป แต่ถ้ามันใช้งานได้มันก็ใช้ได้