센터 H4

나는 다음과 같은 코드를 가지고 :센터 H4

<div style="border: 1px solid rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.1); padding: 10px;"> 
    <span>Test</span> 
    <h4 class="heading" style="text-align: center;"> 
     <a href="bitcoin:1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3">1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3</a> 
    </h4> 
</div>

이 나에게이 결과 제공 : https://dl.dropboxusercontent.com/u/37289435/prob-1.png

나는 "테스트"원하는 링크 "1Dxit .."하나의를 왼쪽 사이트에서 "Test"를 선택하고 링크를 중앙에 놓습니다. "display : inline;"을 추가하면 h4 태그에이 결과가 표시됩니다. https://dl.dropboxusercontent.com/u/37289435/prob-2.png

인라인이지만 링크가 더 이상 가운데에 있지 않습니다. 무엇이 문제이며 어떻게 해결할 수 있습니까?

출처

2014-04-18 namespace

H4 요소에는 기본적으로 여백이 첨부되어 있습니다. H4의 상단 여백을 제거 할뿐만 아니라 스팬의 줄 높이와 동일한 음수 여백을 지정해야합니다. 이 같은

뭔가 :

http://jsfiddle.net/smnpL/

출처

2014-04-18 15:43:49 Sam

여백은 "heading"클래스에서 제거되지만 -margin 것은 너무 쉽게 알 수 없습니다. 감사. – namespace

아니요, "여백"때문이 아닙니다. 그렇게하면 페이지가 실제로 반응하지 않을 것입니다. 물건을 픽셀 단위로 (-29px) 퍼팅하는 것은 거의 유지할 수 없기 때문에 나쁜 방법입니다. 는 참고로'은'''는 블록 요소 내가 당신의 대답 @PatrickFerreira에 대한 그 http://jsfiddle.net/smnpL/2/ –

감사처럼이 작업을 수행 할 것입니다, 인라인 요소입니다,하지만 난 "는 원하는 왼쪽 사이트에서 '테스트'범위를, div에서 가운데에있는 링크를 클릭하십시오. 페이지의 책임 성을 잃지 않고 이것이 가능합니까? – namespace

당신의 CSS를이 추가 :

h4{ 
display:inline-block; 
}

출처

2014-04-18 16:32:12 Othuna

참조하십시오 데모 :

http://jsbin.com/becit/1

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
    .b { 
     display:table; 
     width:100%; 
    } 
    .b span { 
     display:table-cell; 
     vertical-align:middle; 
     padding: 10px 5px 10px 10px; 
    } 
    .b h4 { 
     padding: 10px 10px 10px 5px; 
     word-break:break-all; 
    } 
    </style> 

</head> 

<body> 

    <div class="b" style="border: 1px solid rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.1);"> 
     <span>Test</span> 
     <h4 class="heading" style="text-align: center;"> 
      <a href="bitcoin:1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3">1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3</a> 
     </h4> 
    </div> 

</body> 

</html>

출처

2014-04-18 16:34:56 aisin

답변

관련 문제