Twitter Bootstrap을 사용하고 있으며 테이블 셀 내부에 버튼을 배치하려고합니다. 나는 그것이 수직으로 중앙에 있어야만합니다.
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
<td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
</tr>
</tbody>
</table>
문제에 대해서는 내 JSFiddle 을 참조하십시오 . 내가 아는 테이블 센터링 트릭을 여러 번 시도했지만 제대로 작동하지 않는 것 같습니다. 어떤 아이디어? 미리 감사드립니다.
업데이트 : 예, 시도 vertical-align:middle;
했습니다. 인라인이면 작동하지만 클래스에 있으면 작동하지 않습니다 td
. 이를 반영하도록 JSFiddle을 업데이트했습니다.
최종 업데이트 : 저는 바보이고 bootstrap.css에 의해 덮어 쓰기되었는지 확인하지 않았습니다.
답변
BOOTSTRAP 3.X의 경우 :
Bootstrap은 이제 테이블 셀에 대해 다음 스타일을 갖습니다.
.table tbody > tr > td{
vertical-align: top;
}
이동하는 방법은 자신의 클래스를 추가하여 이전 선택기에 더 많은 특수성을 추가하는 것입니다.
.table tbody > tr > td.vert-aligned {
vertical-align: middle;
}
그런 다음 클래스를에 추가하십시오 td
.
<tr>
<td class="vert-aligned"></td>
...
</tr>
BOOTSTRAP 2.X 용
없습니다 이 작업을 수행 할 수있는 방법 부트 스트랩으로는.
테이블 셀에서 사용되는 경우 vertical-align 은 대부분의 사람들이 기대하는대로 수행하며, 이는 (오래된, 더 이상 사용되지 않는) valign 속성을 모방하는 것입니다. 최신 표준 호환 브라우저에서 다음 세 코드 조각은 동일한 작업을 수행합니다.
<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>
바이올린 업데이트 확인
더욱이
또한 Bootstrap에 이미이 클래스가 있기 때문에 td
사용 하는 클래스를 참조 할 수 없습니다 .vert
.
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top; // The problem!
border-top: 1px solid #dddddd;
}
그리고 vertical-align: middle
in ‘.vert’클래스를 오버로딩하고 있으므로이 클래스를 td.vert
.
답변
Bootstrap 3에 대한 약간의 업데이트.
Bootstrap은 이제 테이블 셀에 대해 다음 스타일을 갖습니다.
.table tbody>tr>td
{
vertical-align: top;
}
이동 방법은 동일한 선택기로 자신 만의 클래스를 추가하는 것입니다.
.table tbody>tr>td.vert-align
{
vertical-align: middle;
}
그런 다음 tds에 추가하십시오.
<td class="vert-align"></td>
답변
당신의 CSS에 이것을 추가하십시오
.table-vcenter td {
vertical-align: middle!important;
}
그런 다음 테이블에 클래스를 추가하십시오.
<table class="table table-hover table-striped table-vcenter">
답변
이 문제를 해결하기 위해이 수업을 웹 페이지에 올렸습니다.
<style>
td.vcenter {
vertical-align: middle !important;
text-align: center !important;
}
</style>
그리고 이것은 내 TemplateField에
<asp:TemplateField ItemStyle-CssClass="vcenter">
CSS 클래스가 td (tabledata) 요소를 직접 가리키고 각 설정 끝에! important 문장이 있기 때문입니다. 규칙은 CSS 클래스 설정을 부 트랩합니다.
도움이되기를 바랍니다.
답변
버튼을 포함 vertical-align: middle;
하는 td
요소에 추가
<td style="vertical-align:middle;"> <--add this to center vertically
<a href="#" class="btn btn-primary">
<i class="icon-check icon-white"></i>
</a>
</td>
답변
그렇다면 왜 td 기본값은 vertical-align : top ;? 나는 정말로 그것을 아직 모른다. 나는 감히 그것을 만지지 않을 것이다. 대신 이것을 스타일 시트에 추가하십시오. 테이블의 버튼을 변경합니다.
table .btn{
vertical-align: top;
}