순수한 CSS로 버튼을 만들려고하고 있으며 다른 요소를 정렬 할 때 눈부신 실패를합니다. 이것은 아마 쉬운 일이지만, 나는 그 주위에 내 머리를 얻을 수 없습니다. 는 여기가 보일 것입니다 방법은 다음과 같습니다버튼 내부에서 이미지와 텍스트를 함께 수평 및 수직 가운데에 맞 춥니 다
버튼은 텍스트와 이미지 모두를 포함해야합니다. 둘 다 수직으로 중심에 있어야합니다. 둘 다 함께은 수평 중심이어야합니다.
이 중 하나를 작동시킬 수는 있지만 둘 다를 동시에 수행 할 수는 없습니다. 지금까지 사용하고 무엇을 저를 위해 가능한 한 단순화로 정말 여기에이 일의 최고의 방법이 될 것이나, 무엇으로 몇 가지 지침을 찾고 있어요
은 다음과 같습니다
<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>
그리고 이것이 현재의 결과입니다. 아이콘이 오른쪽으로 더해야하고, 텍스트뿐만 아니라 오른쪽으로 조금 더 어떻게해야
참고. 나의 현재의 이해는 아이콘에 대해 절대적인 정렬을 사용하면 흐름에서 그것을 제거하기 때문에 죽은 중심이라는 것입니다.
(ERB를 통해 HTML을 생성하기 때문에 나에게 이상한 변수의 일부.)
후 지금까지 무엇을 :
DEMO
– Todd저는이 작업을 수행하는 가장 좋은 방법이 무엇인지에 대한 지침을 찾고 있습니다.하지만 적절한 수직 정렬을 처리하는 코드를 게시했습니다. 헤즈 업에 감사드립니다! – ludwigschubert