버튼 센터 CSS


86

일반적인 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>

답변:


202

나는 이것이 매우 오래된 질문이라는 것을 알고 있지만 오늘이 문제를 우연히 발견하고 해결했습니다.

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

건배, 마크


이 요소 근처에 오른쪽 / 왼쪽 부동 스타일이있는 다른 요소는이 요소가 중앙에서 벗어난 것처럼 보일 수 있습니다.
shlgug

1
난 당신이 맞아요을 신뢰하지만, 단지 할 수없는 이유가있다<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
RobotHumans

30

문제를 해결하려면 CSS에 다음을 추가하는 것이 좋습니다.

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

4
최고의 답변입니다. 외부 컨테이너가 없으며 (아마도) 단점이 없습니다.
Konrad Gałęzowski

23

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

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

그것은 작동 (그리고 감각을 mekes) 버튼을 단지 안에 한 경우, 재료 UI를위한<Grid item>...</Grid>
후안 살바도르에게

오 좋은 아이디어 :
마틴 Volek

10

문제는 다음 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;
}

2
게시물 주셔서 감사합니다. 안타깝게도 작동하지 않습니다. 여전히 모두 왼쪽에 있습니다.
Stevanicus

네, 방금 깨달았습니다. .centerButtons가 블록 요소이고 .nav에서 전체 공간을 차지하여 여백 속성을 쓸모 없게 만들기 때문입니다. .centerButtons를 부동으로 수정하려고 시도했지만 운이 없습니다.
Espresso

그래 난 그것의 까다로운 것을 알고, 내가 전에 해본 적이 있기 때문에 나를 짜증나게하지만 어떻게 :) .... 어떤 아이디어?
Stevanicus

1

문제를 해결하려면 CSS에 다음을 추가하는 것이 좋습니다.

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

-1

다른 모든 것이 실패하면 난 그냥

<center> content </center>

나는 그것이 더 이상 "표준에 달하는"것이 아니라는 것을 알고 있지만 그것이 작동한다면 작동합니다


12
이 답변은 다른 답변에 아무것도 추가하지 않습니다. <center>HTML4에서 더 이상 사용되지 않으며 HTML5에서도 지원되지 않습니다. 즉, HTML5를 사용하면 작동하지 않을 수 있습니다.
Magnilex

1
다른 일을 할 수 없을 때만 사용합니다. html5가 있지만 선호하지 않는 페이지에서 사용했습니다. 내가 할 수있는 <div align="center">button</div>
겪고

사용되지 않는 태그는, 그것을 사용하는 나쁜 습관이다
Sunchock
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.