버튼 센터 CSS

버튼 센터 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>

어떤 도움이라도 대단히 감사하겠습니다. 감사

---

결과

너비를 알 수 없으면 버튼을 중앙에 배치하는 방법을 찾았지만 완전히 행복하지는 않지만 중요하지 않습니다.

가장 좋은 방법은 테이블에 놓는 것입니다

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

건배, 마크

---

또 다른 좋은 옵션은 다음을 사용하는 것입니다.

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

---

문제는 다음 CSS 줄에 있습니다 .nav_button.

margin: 0 auto;

이는 버튼이 하나 인 경우에만 작동하므로 둘 이상의 nav_buttondiv 가있을 때 중앙에서 벗어난 것 입니다.

If you want all your buttons centered nest the nav_buttons in another 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>

And style it this way:

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

---

Consider adding this to your CSS to resolve the problem:

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

---

when all else fails I just

<center> content </center>

I know its not "up to standards" any more, but if it works it works

참고URL : https://stackoverflow.com/questions/3622756/button-center-css