높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?

debugcn 에 게시 Dev

무 아즈

이것은 사소한 것처럼 보일 수 있지만 많은 제안 된 솔루션을 검토했지만 아무것도 찾지 못했습니다. 목표는 <a>높이와 너비가 고정 된 앵커 버튼 을 만들고 텍스트 너비에 관계없이 텍스트를 가운데 (세로 및 가로)로 유지하는 것입니다.

예:

무 아즈

내가 도달 한 가장 좋은 해결책은 다음과 같습니다.

수직 센터 클래스 정의 :
```
.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;}
```
이것은 텍스트를 수직 및 수평 중앙에 배치하는 버튼의 내부 컨테이너 역할을했습니다.

btn 클래스를 정의합니다.

.btn {
    width: 300px;
    height: 75px;
    background-color: transparent;
    color: #000;
    border-radius: 0;
    border: #000 solid 1px;
    cursor: pointer;
    text-align: center;}

버튼 스타일링을위한 클래스 btn 서버.

마침내 내부 div를 앵커 태그 <a>로 래핑 하여 버튼을 연결했습니다.

<a href="#">
  <div class="btn text-vertical-center">
      Button text
  </div>
</a>

이것은 잘 작동하는 것으로 보이며 내가 아는 한 대부분의 브라우저와 호환됩니다. 더 나은 해결책이 있으면 알려주세요.

JSFiddle 예 : https://jsfiddle.net/MuaazO/ga4s540v/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-14

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?

높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?

Tabulator 테이블을 높이와 너비가 고정 된 div에 맞추는 방법은 무엇입니까?

이미지와 텍스트가 세로로 정렬 된 머티리얼 디자인 버튼을 만드는 방법은 무엇입니까?

버튼에서 이미지와 텍스트를 더 가깝게 만드는 방법은 무엇입니까?

드래그 가능한 이미지에 너비와 높이를 설정하는 방법은 무엇입니까?

가로 세로 비율을 유지하면서 브라우저 너비와 높이에 맞게 조정되는 동적 캔버스 / 그리드 / 행 / 열을 만드는 방법은 무엇입니까?

가로 세로 비율을 유지하면서 브라우저 너비와 높이에 맞게 조정되는 동적 캔버스 / 그리드 / 행 / 열을 만드는 방법은 무엇입니까?

div를 최대 너비로 * only * 감싸고 부모 컨테이너가 오버플로되기 때문에 만드는 방법은 무엇입니까?

텍스트와 라디오 버튼 사이에 공백을 추가하는 방법은 무엇입니까?

아이콘이 있고 텍스트가없는 jQuery 모바일 버튼을 텍스트가있는 버튼과 같은 높이로 만듭니다.

이미지에 버튼과 텍스트를 추가하고 반응 형으로 만드는 방법은 무엇입니까?

SwiftUI에서 List 데이터 소스가 비어있을 때보기 중앙에 텍스트 메시지를 표시하는 방법은 무엇입니까?

앵커 (보기)는 여러 목록 팝업 창을 추가하고 각 목록 팝업 창을 앵커에 배치하는 방법은 무엇입니까?

고정 컨테이너 내부의 div가 오버플로되면 두 개의 스크롤 가능하게 만드는 방법은 무엇입니까?

너비와 높이가 같은 두 HTML 캔버스가 두 번째에 대해 다른 높이로 반환되는 이유는 무엇입니까?

html 버튼의 중앙에 아이콘과 텍스트를 정렬하는 방법은 무엇입니까?

컨테이너 내에서 테이블 높이와 너비를 조정하고 <tbody>에 가로 및 세로 스크롤 막대를 추가하여 오버플로를 방지하는 방법은 무엇입니까?

내부 앵커에 영향을주지 않고 클릭 가능하게 만드는 방법은 무엇입니까?

두 개의 앵커 링크를 플로팅하고 텍스트를 가로 및 세로로 정렬하는 방법은 무엇입니까?

요소 정렬에 대한 질문과 커서가이 편집 가능한 코드 텍스트 영역의 텍스트와 같은 높이를 유지할 수있는 방법은 무엇입니까?

이 텍스트가 중앙에 있지 않은 이유는 무엇입니까?

중앙의 테이블 뷰에 텍스트 레이블을 추가하는 방법은 무엇입니까?

너비와 높이 CSS가이 버튼 요소에 영향을주지 않는 이유는 무엇입니까?

앵커 셀이있는 Excel 수식을 복사하고 앵커가 n 행마다 업데이트되도록하는 방법이 있습니까?

버튼을 같은 선, 중앙에 배치하고 서로 너무 가깝지 않게 배치하는 방법은 무엇입니까?

QListWidget이 비어있을 때 중앙에 자리 표시 자 텍스트를 설정하는 방법은 무엇입니까?

안드로이드에서 중앙 텍스트와 이미지가있는 라디오 버튼 그룹을 구현하려고합니다.

내부에 텍스트가있는이 아이콘을 만드는 방법은 무엇입니까?

WinForms 버튼의 텍스트 앞에 이미지 아이콘을 추가하는 방법은 무엇입니까?

Flutter 버튼을 최대 너비까지 가능한 한 넓게 만드는 방법은 무엇입니까?