는 어떻게 버튼처럼 내 앵커 태그의 모양을 원하는 앵커 태그

내부의 텍스트를 중심으로,이 스타일 JsFiddle 는 어떻게 버튼처럼 내 앵커 태그의 모양을 원하는 앵커 태그

.details-button { 
    background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #FAB149; 
    -ms-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 1px 2px #999999; 
    -ms-box-shadow: 0 1px 2px #999999; 
    box-shadow: 0 1px 2px #999999; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    -ms-text-shadow: 0 -1px #099FDF; 
    text-shadow: 0 -1px #099FDF; 
    margin: 4px; 
    height: 28px; 
    width: 85px; 
    vertical-align: central; 
    align-items: center; 
    text-decoration: none; 
    font: menu; 
    display: inline-block; 
    /*padding: 6px 0 5px 18px;*/ 
}

그것은 내가 원하는대로 보이는,하지만 어떻게 앵커 태그 내부에 수평 및 수직 텍스트를 가운데에 생성하는?

출처

2014-01-29 Arsen Mkrtchyan

세로 중심선은 선 높이를 사용하여 수행 할 수 있습니다. 텍스트 정렬을 사용하여 가로로 표시합니다. –

FYI : "align-items"는 대부분의 웹 브라우저에서 아직 실제적이지 않습니다. 또한 디스플레이가있는 컨테이너 (flex 또는 display : inline-flex)에만 적용되며 텍스트 자체가 아니라 해당 컨테이너 내부의 요소 만 차단할 수 있습니다. – mellowfish

text-align: center; 
line-height: 28px;

작업 데모 추가 http://jsfiddle.net/3SE8L/2/

출처

2014-01-29 22:34:52 MarcinJuraszek

좋아요, 선 높이가 무엇인지 물어볼 수 있고 28 번을 어디에서 가져 왔습니까? :) –

간단한 간단한 텍스트 줄 수를 설정합니다. 그리고 이것을 28로 설정했습니다. 왜냐하면 그것이 '높이'요소로 설정 한 값이기 때문입니다. 선으로 전체 공간을 채우고 자동으로 내용을 세로 가운데로 만듭니다. – MarcinJuraszek

@ArsenMkrt line-height는 요소의 각 텍스트 행의 높이이며, 행의 위와 아래로 이어집니다. 한 줄의 텍스트의 경우이 높이를 컨테이너 높이로 설정하면 텍스트의 가운데에 배치됩니다. – mellowfish

기존 클래스의 text-align: center;.

출처

2014-01-29 22:34:17 mellowfish

좋은데, 단지 수평으로 만 놓는다 –

아, 나는 당신의 질문에 "수직적으로"놓쳤다. 자동으로하는 것이 훨씬 까다 롭습니다. – mellowfish

은 수평 및 수직으로 중앙에 중앙에 텍스트를 정렬하기를,이 시도 :

CSS : Example Fiddle

.details-button{ 
    //your existing styles 
    //height: 28px; <-- remove this entry 

    text-align: center; 
    padding: 6px 0; 
}

출처

2014-01-29 22:37:30 badAdviceGuy

패딩은 더 큰 버튼 –

@ArsenMkrt을 만들었지 만, 2px 3px 등 원하는대로 패딩을 편집하거나 '75em '등의 EM을 사용할 수 있습니다. 맞습니까? – badAdviceGuy

글쎄, 그렇긴하지만 내 단추가 28px 높이를 갖기를 원하거나 ... 높이를 없애고 높이를 조정할 필요가 있습니다. 다른 방법으로도이 방법을 사용해주세요. –

먼저이 스타일 선언을 제거하십시오. 그것은 잘못된 마크 업입니다 :

vertical-align: central;

다음,이 수평 텍스트를 중앙에 추가, 마지막으로

text-align: center;

당신의 높이를 자동을 대신 라인 높이 선언, 맛 패딩을 설정합니다 :

height:auto; 
padding:3px 0;

그렇게해야합니다! 일부 브라우저에서는 CSS가 중단 될 수 있으므로 잘못된 선언을 제거하십시오.

도움이된다면 투표 해주세요. 감사. :)

출처

2014-01-29 22:53:34

예. 도움이됩니다. 감사 :) –

는 어떻게 버튼처럼 내 앵커 태그의 모양을 원하는 앵커 태그

답변

관련 문제