2012-12-21 3 views
1

순수한 CSS로 버튼을 만들려고하고 있으며 다른 요소를 정렬 할 때 눈부신 실패를합니다. 이것은 아마 쉬운 일이지만, 나는 그 주위에 내 머리를 얻을 수 없습니다. 는 여기가 보일 것입니다 방법은 다음과 같습니다버튼 내부에서 이미지와 텍스트를 함께 수평 및 수직 가운데에 맞 춥니 다

enter image description here

버튼은 텍스트와 이미지 모두를 포함해야합니다. 둘 다 수직으로 중심에 있어야합니다. 둘 다 함께은 수평 중심이어야합니다.

이 중 하나를 작동시킬 수는 있지만 둘 다를 동시에 수행 할 수는 없습니다. 지금까지 사용하고 무엇을 저를 위해 가능한 한 단순화로 정말 여기에이 일의 최고의 방법이 될 것이나, 무엇으로 몇 가지 지침을 찾고 있어요

은 다음과 같습니다

<span style="display:table; text-align:center;"> 
<span style="display:table-cell; position:relative; "> 
    <a href=… > 
     <img style="position:absolute; top:50%; margin-top:-#{ height/2}px"></img> 
    </a> 
</span> 
    <a href=… > TEXT </a> 
</span> 

그리고 이것이 현재의 결과입니다. 아이콘이 오른쪽으로 더해야하고, 텍스트뿐만 아니라 오른쪽으로 조금 더 어떻게해야

enter image description here

참고. 나의 현재의 이해는 아이콘에 대해 절대적인 정렬을 사용하면 흐름에서 그것을 제거하기 때문에 죽은 중심이라는 것입니다.

(ERB를 통해 HTML을 생성하기 때문에 나에게 이상한 변수의 일부.)

+2

후 지금까지 무엇을 :

button{ padding: 1em 2em; } img, span{ vertical-align:middle; } 

DEMO

Todd

+0

저는이 작업을 수행하는 가장 좋은 방법이 무엇인지에 대한 지침을 찾고 있습니다.하지만 적절한 수직 정렬을 처리하는 코드를 게시했습니다. 헤즈 업에 감사드립니다! – ludwigschubert

답변

3

당신은 단지에서 일부 텍스트와 button에게 이미지를 사용할 수 있습니다. 단추의 내용을 세로로 맞추고 패딩을 추가하십시오.

<html> 
<head> 
<style> 
    .icon_button{ 
     background:#FFFFFF url(http://www.limitedlink.com/images/png/ico.png) no-repeat 4px 4px; 
     padding:4px 4px 4px 22px; 
     height:auto; 
    } 
</style> 

</head> 
<body> 
    <input type="button" value="halo" class="icon_button" /> 
</body> 
</html> 
+0

죄송합니다. 버튼의 텍스트가 제대로 세로로 정렬되지 않습니다. 데모를 보면 너무 높을 것 같습니다. – ludwigschubert

+0

@ludwigschubert 중앙 집중식 http://s8.postimage.org/g4a3rkmyt/button.png – Musa

+0

와우, 재미 있습니다. Chrome의 코드는 다음과 같습니다. http://s10.postimage.org/pmvuy0emh/not_centered.png – ludwigschubert

0

<button><span><img src="http://placehold.it/25x25">Some Text</span></button>​ 

당신이 HTML 검색나요.
+0

나는 HTML을보고 시도해 보았고 이것이 어떻게 센터링에 적용되는지를 보지 못했습니다. 모든 패딩은 하드 코딩됩니다. 아이콘이나 텍스트는 가로로 정렬되지 않습니다. 그러나 당신의 노력에 감사드립니다! – ludwigschubert

+0

자바 스크립트를 편집 한 후 확인하십시오. 나는 당신이 "하드 코드 된"이라고 말하면서 이해하지 못한다. 아마도 나를 더 설명 할 수있을 것이다. – Reinstar

관련 문제