앵커 링크가있는 div를 가로로 가운데에 배치하는 방법은 무엇입니까?

나는 이것을 조사하고 몇 가지 지침을 따르고 작동하지 않는 것 같습니다.앵커 링크가있는 div를 가로로 가운데에 배치하는 방법은 무엇입니까?

이 코드에 대한 링크를 따르십시오 : 부모 사업부에

내가 해봤 margin: 0 auto; (center-block 클래스) 및 float: none;을하지만 난 그것을 얻이 수없는 것. 누군가가 나를 페이지의 중간에 div를 중심으로 왜 작동하지 않는지 말해 줄 수 있습니까?

예상 결과 : https://jsfiddle.net/3h937r1q/22/

I 당신은 COL 오프셋 사용할 수있는 중간

출처

2016-07-01 Andrew Kilburn

당신은 당신이 지금까지 시도 코드의 일부를 제공시겠습니까? – AlbanianGamerYT

@AlbanianGamerYT jsfiddle을 따라 가면 코드 –

을 볼 수 있습니다. – adamk22

에 그것을 이동 margin-left를 사용하지 않으 제외 :

 <div class="col-xs-12 col-md-12 home-buttons center-block" > 
     <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate col-sm-offset-2 col-md-offset-4" > 
      <div class="tile-text"> 
       AP REVIEW 
      </div> 
     </a> 
     <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate"> 
      <div class="tile-text"> 
       VAT CHECKER 
      </div> 
     </a> 
    </div>

출처

2016-07-01 10:11:08

@Thanks의 중앙에 직접 그래서 당신이 –

만주고 올바른 방식으로 오프셋 ... 이미 중앙에 정렬 될 경우 ... –

화면이 12 COLS 나누어 져 ... 그래서 유 4, 4 길이 2 COLS이 있다고 가정 .... 나머지 길이는 4 그래서 센터에서 그들을 정렬하려면 2 오프셋을 줄 필요가 ... –

내가 height을 제거하고 주어진 padding: 40px 0px to anchor tag

Updated DEMO

.home-buttons .HomepageBtn { 
    background-color: #4F7F64; 
    /*height: 140px;*/ 
    padding: 40px 0px; 
    color: white; 
    font-size: small; 
    font-family: "futura-pt-n7", 'futura-pt', Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    border-style: solid; 
    text-align: center; 
}

출처

2016-07-01 10:12:24 Manwal

안녕하세요, 죄송합니다! 나는 내 질문을 업데이트했다. 나는 텍스트가 아닌 div를 중심으로 사용했다. –

퀘스트에 예상되는 출력 이미지를 추가하면 도움이 될 것입니다. – Manwal

'width'를 줄 수 있다면 스타일이 있습니다. 그것을 확인하십시오. https://jsfiddle.net/3h937r1q/24/ – Manwal

나는 이것을 찾고 있다고 생각합니다. 태그 안에 부트 스트랩 표를 사용하는 경우 부트 스트랩 오프셋 클래스를 사용하여 요소를 가운데에 맞춰야합니다.

<div class="col-xs-12 col-md-12 home-buttons"> 
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 col-md-offset-4 col-sm-offset-2 HomepageBtn Animate"> 
     <div class="tile-text"> 
     AP REVIEW 
     </div> 
    </a> 
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate"> 
     <div class="tile-text"> 
     VAT CHECKER 
     </div> 
    </a> 
</div>

출처

2016-07-01 10:18:18 WebDevRon

https://jsfiddle.net/25Lno6n7/

.home-buttons { 
    width:600px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    } 

    .home-buttons .HomepageBtn { 
    flex:0 0 300px; 
    }

출처

2016-07-01 10:23:41

앵커 링크가있는 div를 가로로 가운데에 배치하는 방법은 무엇입니까?

답변

관련 문제