developer tip

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

copycodes 2020. 9. 11. 08:10
반응형

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


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;
}

And is overloading the vertical-align: middle in '.vert' class, so you have to define this class as td.vert.


A little update for Bootstrap 3.

Bootstrap now has the following style for table cells:

.table tbody>tr>td
{
    vertical-align: top;
}

The way to go is to add a your own class, with the same selector:

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

And then add it to your tds

<td class="vert-align"></td>

add this to your css

.table-vcenter td {
   vertical-align: middle!important;
}

then add to the class to your table:

        <table class="table table-hover table-striped table-vcenter">

To fix this, i put this class on the webpage

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

and this in my TemplateField

<asp:TemplateField ItemStyle-CssClass="vcenter">

as the CSS class points directly to the td (tabledata) element and has the !important statment at the end each setting. It will over rule bootsraps CSS class settings.

Hope it helps


Add vertical-align: middle; to the td element that contains the button

<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>

So why is td default set to vertical-align: top;? I really don't know that yet. I would not dare to touch it. Instead add this to your stylesheet. It alters the buttons in the tables.

table .btn{
  vertical-align: top;
}

참고URL : https://stackoverflow.com/questions/13771101/centering-a-button-vertically-in-table-cell-using-twitter-bootstrap

반응형