반응형
td에서 정렬 버튼의 중심을 맞추는 중
td의 버튼의 중심을 맞추는 데 문제가 있습니다.
이것은 아마도 단순한 CSS 문제일 것입니다만, 앱은 부트스트랩, AngularJS, Angular를 사용하고 있습니다.JS-ui 부트스트랩 및 ngTable.이 모든 컴포넌트를 제 펑크에 포함시켰습니다.
td에 '수평 얼라인먼트: 중간'을 버튼으로 설정하려고 하는데 그것이 적용되지 않는 것 같습니다.버튼은 아직 셀의 왼쪽으로 기울어져 있습니다.
다음을 사용할 수 있습니다.
display: block;
margin: auto;
위에서 설명했듯이 TD를 align="center" 속성을 가지도록 변경하기만 하면 됩니다.
<td align="center"></td>
이 글을 올린 후 HTML5에서는 권장되지 않으므로 CSS의 TD에서 "text-align: center"를 사용하는 것이 가장 좋습니다.
이건 내게 효과가 있었다.
<td style="text-align: center">
JSF 컨트롤을 페이지 중앙에 배치하려면 다음 속성을 결합해야 했습니다.
<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>
부트스트랩4 를 사용하고 있는 경우는, 이러한 클래스를 에 추가합니다.<td>요소(내 요소에는 2개의 버튼이 있습니다):
<td class="text-center align-middle">
<div class="btn-group">
<button class="btn btn-outline-primary">+</button>
<button class="btn btn-outline-primary">-</button>
</div>
</td>
text-center수평방향으로 콘텐츠를 중앙에 배치합니다.align-middle는 콘텐츠를 수직으로 중앙에 배치합니다.
나는 잘 되었다
<td align="center">
<input type="button" style="float:none!important;display:inline;" value="click" />
</td>
td 대신 버튼을 변경하시겠습니까?스타일에 대한 영향을 줄입니다.
table .btn{
vertical-align: top;
}
HTML:
<td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
.table-row-radio-button {
text-align: center;
}
날 위해 일했어
언급URL : https://stackoverflow.com/questions/22385386/trying-to-center-align-button-in-td
반응형
'codememo' 카테고리의 다른 글
| Angular 테스트 방법모카를 이용한 JS코드? (0) | 2023.03.04 |
|---|---|
| 반응 재료 UI 레이블이 텍스트와 겹침 (0) | 2023.03.04 |
| ASP 취득 방법UpdateTargetId에 뷰를 삽입하는 대신 새 페이지로 리디렉션하는 NET MVC Ajax 응답 (0) | 2023.03.04 |
| 사용자 지정 주문 메타를 woocommerce 전자 메일로 호출합니다. (0) | 2023.03.04 |
| 오류 콜백에 사용할 AJAX 응답 본문을 가져오는 중 (0) | 2023.03.04 |