[css] Twitter Bootstrap을 사용하여 테이블 셀에서 세로로 버튼 중앙에 배치

Program / 글쓴이

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: middlein ‘.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;
}

답변