버튼 옆에이 텍스트를 가운데 정렬하는 방법은 무엇입니까?

jsFiddle 버튼 옆에이 텍스트를 가운데 정렬하는 방법은 무엇입니까?

스크린 샷

<div class="client-box"> 
    <div class="box-header clearfix"> 
    <h6 class="pull-left">General Information</h6> 
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button> 
    </div> 
    <p>box content</p> 
</div>

가 어떻게 헤더 <h6> 편집 버튼에 대한 수직 중심을 얻을 수있는 HTML?

vertical-align을 box-header에 넣는 것은 작동하지 않습니다. 버튼 크기를 변경하거나 나중에 무언가를 바꿀 수 있기 때문에 선 높이를 하드 코딩하지 않으려 고합니다.

출처

2013-01-16 mpen

알다시피, 이것은 오랫동안 CSS에서 끔찍한 실패였습니다. 나는 많은 경험을 가지고 있지만 신뢰할만한 수직 정렬 솔루션을 아직 안다. 내가 제안 할 수있는 가장 좋은 것은 당신의 요구에 맞을 때까지 선 높이를 조절하는 것입니다 ... ps, 네, 선 높이를 설정하고 싶지 않다고 말한 것을 압니다. 나는 이것이 내가 자주해야만하는 것이라고 말하고있다. –

'em'에서'padding : 0.5em 0;'과 같은 것을'padding' 또는'margin'을 주면된다. –

필자가보기에 '

'은'float : left'이고, 사용자의

display: table 및 display: table-cell 및 vertical-align: middle을 사용할 수 있습니다. 1, 표 셀 2, 인라인 요소 :

HTML

<div class="box-header clearfix"> 
    <div class="left-cell"> 
     <h6>General Information</h6> 
    </div> 
    <div class="right-cell"> 
     <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button> 
    </div> 
</div>

CSS는

.box-header { 
    border-bottom: 1px solid #aac7ef; 
    padding-bottom: 5px; 
    display: table; 
    width: 100%; 
} 
.left-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 
.right-cell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
}

Demo

출처

2013-01-16 04:31:24 3dgoo

'text-align : 버튼을 오른쪽 정렬 상태로 유지하기 위해'.right-cell'에'right'를 사용합니다. 그렇지 않으면 완벽하게 작동하는 것 같습니다. – mpen

예 .. 수직 정렬은 CSS에서 문제가되었습니다. 그래서 당신이 상자 머리글의 마진 - 상단을 설정하는 것이 좋습니다 ... margin-top : 1px .. 상자 머리글 여백 위쪽을 조정하면 문제가 해결됩니다. 또한 파이어 폭스의 Firebug에서 margin-top을 설정해야하는 픽셀 수를 확인할 수 있습니다.

출처

2013-01-16 04:00:40

하드 코딩하지 않으려면 동적으로 설정하십시오.

$(function() { 
    $('h6.pull-left').css('line-height', $('button.btn.pull-right').outerHeight() + 'px'); 
});

나는 요소가 왼쪽과 오른쪽 등 수직 정렬이 경우에 작동하지 않습니다 떠있는 당신이 pull-right 및 pull-left을 사용됩니다 jsfiddle

출처

2013-01-16 04:01:12 twksos

를 만들었습니다. 당신이 할 수있는 가장 좋은 방법은 패딩을 사용하는 것입니다. 또는 다른 사람들이 h6 요소의 line-height을 24px와 같은 것으로 설정하는 것이 좋습니다. 그리고 예 vertical-align:middle은 반점이 많으며 픽셀 완성을 추구하는 사람들에게는 결코 만족스럽지 않습니다.

출처

2013-01-16 04:04:27 keeg

vertical-align 오브젝트 만의 두 유형에 적용 에스.

다른 유형의 HTML 요소에는 영향을주지 않습니다.

'여드름'이나 '문제'가 아니라 대부분의 사람들이 원하는대로하지 않는 것이 아닙니다.

이상적으로는 수직으로 텍스트를 정렬하지 않는 것이 좋습니다.하지만 때때로해야 할 일이 있습니다. 다양한 방법으로이를 수행 할 수 있으며이를 수행하는 방법을 결정할 때 일반적으로 작업하는 특정 상황에 따라 다릅니다.

이 상황에서 한 줄의 텍스트에 의존 할 수 있다면 가장 좋은 방법은 여분의 상단 패딩 또는 position-relative으로 광학적으로 조정하고 몇 픽셀 아래로 떨어 뜨리는 것입니다.

출처

2013-01-16 04:32:44

버튼 옆에이 텍스트를 가운데 정렬하는 방법은 무엇입니까?

답변

관련 문제