중심으로 배치 된 내용과 여러 줄의 내용으로 된 부트 스트랩 3 사각형 타일 배치 만들기

중심으로 배치 된 내용과 여러 줄의 내용으로 구성된 bootstrap3 사각형 타일 배치를 만들려고합니다. 중심으로 배치 된 내용과 여러 줄의 내용으로 된 부트 스트랩 3 사각형 타일 배치 만들기

는 몇 가지 다른 교환 답변을 이어와 지금까지이있어 :

저를 벗어난 유일한 것은 여러 줄에 중단 내용을 중심으로하는 방법이다.

의견이 있으십니까?

HTML :

<div class="container"> 

    <div class="row"> 

     <div class="col-sm-2 employee-home-link hidden-xs"></div> 

     <div class="col-sm-2 portal-link "> 
      <div class="dummy"></div> 
      <a href="" class="tile">Share Point</a> 
     </div> 

     <div class="col-sm-2 portal-link "> 
      <div class="dummy"></div> 
      <a href="" class="tile">LinkedIn</a> 
     </div> 

     <div class="col-sm-2 portal-link portal"> 
      <div class="dummy"></div> 
      <a href="" class="tile">Web Portal</a> 
     </div> 

     <div class="col-sm-2 portal-link "> 
      <div class="dummy"></div> 
      <a href="" class="tile">Live Chat</a> 
     </div> 

     <div class="col-sm-2 employee-home-link hidden-xs"></div> 
    </div> 
</div>

CSS :

.portal-link.portal > .tile {background-color:#255a25;} 

.dummy { 
    margin-top: 100%; 
} 
.tile { 
    position: absolute; 
    top: 15px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding-top: calc(50% - 55px); 
    line-height: 35px; 
    background-color: #1f476e; 
    margin: 10px; 
    border-radius: 4px; 
    color: #fff; 
    font-size: 200%; 
    font-weight: 600; 
    padding-left: 20px; 
    padding-right: 20px; 
} 
.tile:hover, .tile:focus, .tile:active { 
    color:#e76c0e; 
    text-decoration:none; 
} 
.portal-link.portal > .tile:hover, .portal-link.portal > .tile:focus, .portal-link.portal > .tile:active { 
    color:#8ccafe; 
}

출처

2014-07-18 Sean Kimball

예를 들어 "Web Portal"과 같은 상자의 중앙에 이미 있습니다. 당신이 무엇을 찾고 있는지 잘 모르겠습니다 ... –

두 줄 항목은 있지만 한 줄 항목은 가운데에 있지 않습니다. –

http://css-tricks.com/centering-in-the-unknown/ – Christina

내가 듀얼 라인 텍스트의 새로운 클래스를 추가하고 텍스트에 휴식을 추가하여이 작업을했다.

.shift 
{ 
    vertical-align:middle; 
    clear:both; 
    padding-top:30px; 
} 

<div class="col-sm-2 survey-link "> 
    <div class="dummy"></div>   
<a href="" class="tile shift">B03<br /> 2015-04</a>

출처

2015-10-20 08:09:05 Marius

중심으로 배치 된 내용과 여러 줄의 내용으로 된 부트 스트랩 3 사각형 타일 배치 만들기

답변

관련 문제