div 내에서 버튼의 중심을 잡는 방법은 무엇입니까?

div 내에서 버튼의 중심을 잡는 방법은 무엇입니까?

폭이 100%인 디브가 있습니다.

중앙에 버튼을 놓고 싶은데 어떻게 해야 하나요?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

업데이트된 답변

적극적인 답변이라는 것을 알고 업데이트했지만, 지금은 Flexbox가 올바른 접근 방식일 것입니다.

라이브 데모

수직 및 수평 정렬.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

수평(기본값인 주 플렉스 축이 수평인 경우)

#wrapper {
  display: flex;
  justify-content: center;
}

고정 너비를 사용하고 플렉스 상자를 사용하지 않는 원본

원래 포스터가 수직 및 중앙 정렬을 원할 경우 버튼의 너비와 높이를 고정하기가 매우 쉽습니다. 다음을 시도해 보십시오.

라이브 데모

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

수평 정렬을 위해 다음 중 하나를 사용합니다.

button{
    margin: 0 auto;
}

또는

div{
    text-align:center;
}

다음과 같은 작업을 수행할 수 있습니다.

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

또는 대신 다음과 같이 수행할 수 있습니다.

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

첫 번째 것은 디브 안의 모든 것을 중앙에 맞출 것입니다.다른 하나는 버튼만 가운데 정렬합니다.

etvoila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

업데이트: OP가 수평 및 수직 중심을 찾고 있는 경우, 이 대답은 고정 폭/높이 요소에 적용됩니다.

여백: 0 auto;는 수평 중심에만 해당하는 정답입니다.양쪽의 중심을 맞추려면 jquery를 사용하여 다음과 같은 방법이 작동합니다.

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

---

업데이트... 5년 후에는 부모 DIV 요소의 플렉스박스를 사용하여 버튼을 수평 및 수직으로 쉽게 중앙에 배치할 수 있었습니다.

최상의 지원을 위해 모든 브라우저 접두사 포함

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

제공된 제한된 세부 정보로 가장 간단한 상황을 가정하고 사용할 수 있다고 말하겠습니다.text-align: center:

div {
  background: blue;
  padding: 1em;
  text-align: center;   
}

<div><button>test</button></div>

Flexbox 사용

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

그런 다음 클래스를 단추에 추가합니다.

<button class="Center">Demo</button> 

여기서 간단하게 생각해야 합니다.

먼저 텍스트 또는 버튼의 초기 위치를 확인합니다.

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

이 css 코드 라인을 h2 태그 또는 버튼 태그를 보유한 div 태그에 추가함으로써

style:" text-align:center; "

Finaly 결과 코드:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

중심을 맞히기<button type = "button">a 내에서 수직과 수평 모두.<div>이 경우처럼 동적으로 계산되는 너비는 다음과 같습니다.

1. 세트text-align: center;끝까지<div>이것은 당신이 크기를 조정할 때마다 버튼의 중앙에 위치할 것입니다.<div>(또는 오히려 창)

2. 수직 정렬의 경우 다음을 설정해야 합니다.margin: valuepx;단추를 끼웁니다.이것은 계산하는 방법에 대한 규칙입니다.valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

◦ JS 빈 데모가 있습니다.

div가 #div이고 button이 #button이라고 가정합니다.

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

그런 다음 버튼을 평소와 같이 div에 삽입합니다.

가장 쉬운 방법은 "div"로 입력하는 것입니다. "마진:0 auto"를 지정하십시오. 하지만 중심을 잡으려면 너비를 지정해야 합니다.

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

응답형 CSS 옵션은 상위 요소 크기와 상관없이 버튼을 수직 및 수평으로 중앙에 배치합니다(명확성 및 분리 문제를 위해 데이터 속성 후크 사용).

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

피들: https://jsfiddle.net/crrollyson/zebo1z8f/

버튼을 Div에 중앙에 배치할 수 있는 반응성이 뛰어난 방법:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

대부분의 경우에 적용되는 매우 간단한 대답은 마진을 다음과 같이 설정하는 것입니다.0 auto디스플레이를 다음으로 설정합니다.blockCodePen의 데모에서 단추의 중심을 어떻게 잡았는지 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/7560832/how-to-center-a-button-within-a-div