부트 스트랩 3 경고 내에서 텍스트 및 버튼을 수직으로 정렬

부트 스트랩 3 alert 안에 텍스트 (왼쪽으로 당겨서)와 버튼 (오른쪽으로 당겨)을 수직으로 정렬하려고합니다. 어떻게 든이 같은 :부트 스트랩 3 경고 내에서 텍스트 및 버튼을 수직으로 정렬

+------------------------------------------------+ 
| Some text       [A button] | 
+------------------------------------------------+

내가 지금까지 가지고하는 것은 다음 (Bootply) : 버튼이 완벽하게 정렬되어

<div class="alert alert-info" style="overflow:hidden"> 
    <p class="pull-left">Some text</p> 
    <button class="btn btn-sm btn-default pull-right">A button</button> 
</div>

(이 사실은 내 첫 번째 문제였다 here 해결),하지만 지금은 텍스트가 가운데에 있습니다.

감사합니다. 여기

출처

2014-02-27 muenchdo

당신은 이것을 위해 바이올린을 설정할 수 있습니까? – Travis

@Travis 나는 bootply에 대한 링크를 이미 포함 시켰습니다. 왜 당신은 바이올린이 필요합니까? – muenchdo

하하 나는 그것에 대해 미안하다. – Travis

을해야

.pull-left{line-height:30px}

선 높이를 사용하고 싶다면 다음을 시도해 볼 수도 있습니다.

div.alert-info { 
    position: relative; 
} 

div.alert-info p.pull-left { 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    position: absolute; 
    top: 50%; 
}

http://www.bootply.com/117260

출처

2014-02-27 14:53:18 Adrift

나는 이것을 받아 들였다. 대답은 그것이 나에게 가장 융통성있게 보이기 때문입니다. – muenchdo

텍스트가 두 줄 이상인 경우 작동하지 않습니다. – TheZodchiy

-2

나중에 내가 bootply 여기 http://www.bootply.com/117259

업데이트 가서 내가 한 모든 풀 왼쪽 클래스에 몇 줄 높이를 추가했다 당신이 '돈 가정 트릭

출처

2014-02-27 14:52:50 Travis

다른 경고가 다른 양의 텍스트를 가지고 있다면? 선 높이를 조정해야합니다. 만약 그가'.pull-left'를 다른 곳에서 사용해야한다면 어떨까요? – royhowie

동의했지만 그게 문제가 아니 었습니다.이 특별한 경고에 ID를 사용하십시오 ... up bootply http://www.bootply.com/117264 – Travis

클래스의 오해의 소지가있는 이름 .... – Dementic

경고 div에는 display:table; width:100%;을 사용하고 p 태그에는 부동 소수점을 제거하고 display:table-cell; vertical-align:middle을 사용하십시오.
버튼에 대해 동일한 규칙을 사용할 수 있습니다.

출처

2014-02-27 15:03:27 n1kkou

부트 스트랩 3 경고 내에서 텍스트 및 버튼을 수직으로 정렬

답변

관련 문제