아이콘과 단추 설명 텍스트가있는 링크 단추를 만드는 방법

Question

안녕하세요, 아이콘 옆에 아이콘과 단추 설명 텍스트가 모두있는 링크 단추를 만들려고합니다. 'A'태그 안에 패딩을 추가하여 텍스트가 항상 세로로 가운데가되도록했습니다. 그러나 img를 추가하려고 시도했지만 텍스트가 아래로 밀리고 버튼 크기가 커졌습니다. 내가 잘못 가고있는 어떤 생각?

작은 장치에서이 버튼을 반응 좋게 만들고 싶습니다. 나는 버튼 크기를 조절할 수 있지만 그 텍스트와 아이콘 위치는 문제가된다. 나는 그것들을 항상 수평 적으로 그리고 수직적으로 중심에두기를 원한다. 아이콘과 텍스트가있는 링크 버튼을 만들 수있는 쉬운 방법이 있습니까? 모든 자습서/조언 정말 감사하겠습니다. 아래 코드를 참조하십시오. 감사.

html로 :

<div id="reports_menu_wrapper"> 

    <div id="reports_menu_content"> 
     <a href="#" title="Product Charts"><span><img src="imgs/main_products.png" alt="" /></span>Product Charts</a> 
     <a href="#" title="Speed Charts">Speed Charts</a> 
     <a href="#" title="Financial Charts">Financial Charts</a> 
     <a href="#" title="Usage Charts" id="usage">Usage Charts</a> 
     <br class="clearFloat"/> 
    </div> 

는 CSS가 :

#reports_menu_wrapper 
{ 
width:100%; 
height:auto; 
background-color:pink; 
margin-top:30px; 
} 

#reports_menu_content 
{ 
width:824px; 
height:auto; 
margin:0 auto; 
background-color:#fff; 
padding:10px; 
border:solid 1px #ccc; 
} 

#reports_menu_content a 
{ 
display:block; 
float:left; 
width:198.5px; 
background-color:#eee; 
padding:18px 0; 
outline:solid 1px #ccc; 
margin-right:10px; 
text-transform:uppercase; 
font-size:75%; 
color:#333; 
} 

#reports_menu_content a:hover 
{ 
background-color:#e6e6e6; 
} 

#reports_menu_content #usage 
{ 
margin-right:0; 
} 


#reports_menu_content a img 
{ 
margin-right:10px; 
} 

Answer 1

당신이 필요로하는 것은 당신의 a 태그에 대한 background-image이며, 패딩 관리 :

#reports_menu_content a 
    { 
    background:orange url('yourimage.png') no-repeat left center; 
    padding:0 20px 0 42px; /*42 is equal to the padding left = the image size+10px*/ 
    } 

을

또한 당신이 스프라이트로 작업 할 수 있습니다 각 버튼에 다른 아이콘을 원하는 경우 지금

line-height:40px; 

을 사용할 수 있습니다 vertical 텍스트를 중앙에.

는 확인이 http://jsfiddle.net/Px2zu/8/

Answer 2

당신은 수직으로 다른 요소에 요소를 중심으로 CSS 속성 vertical-align을 사용할 수 있습니다. 그러나이 요소는 인라인 요소 여야한다는 것을 명심하십시오. 귀하의 경우에 텍스트의 중앙에 수직으로 배치되기를 원하면 middle 값을 가진이 속성을 img 요소에 적용해야합니다.

a img { 
    vertical-align: middle; 
} 

나는 개인적으로 수직 텍스트 노드를 중심하지 padding하기 위해 line-height의 사용을 선호합니다. 그러나 그것은 어느 쪽이든 작동합니다.

그러나 CSS 클래스를 사용하여 아이콘과 버튼을 만드는 것이 좋습니다. .bt 클래스는 기본 버튼 스타일을 적용합니다 (예 : 크기, 경계선, 여백 등이 있습니다. .ico 클래스는 다른 클래스를 사용하여 적용 할 아이콘의 오프셋을 설정하는 데 사용됩니다. 이 클래스는 아이콘 다음에 이름이 지정되고 background 속성을 설정합니다. 따라서 아이콘에 화살표가 표시되면 .arrow으로 이름을 지정할 수 있습니다. 그런데 inline 요소를 플로팅하면 자동으로 block 요소로 렌더링되므로 display 속성이 필요하지 않습니다.

.bt { 
    padding: 0 15px; 
    float: left; 
    border: 1px solid #ccc; 
    font: 12px/36px Arial, "sans-serif"; 
    color: #000; 
    text-decoration: none; 
} 

.bt.ico { 
    padding-left: 41px; 
} 

.ico.arrow { 
    background: url("https://cdn0.iconfinder.com/data/icons/entypo/58/under1-16.png") 15px center no-repeat; 
} 

또한 추가 노드를 사용하여 수레를 제거하는 것으로 나타났습니다. 지금까지 내가 아는 한 데이터를 포함하지 않기 때문에이 목적을 위해 여분의 마크 업을 사용하는 것은 좋지 않습니다. 훨씬 더 나은 방법은 의사 요소를 사용하는 것입니다.수레을 취소합니다 다음과 같은 CSS 속성과 래퍼 #reports_menu_content에 적용되는 :after 의사 요소 : 그것은 다른 래퍼에 적용 할 수 있도록

.clear:after { 
    display: block; 
    content: ''; 
    clear: both; 
} 

그리고 또, 그것을 위해 클래스를 사용합니다. http://jsfiddle.net/w33Vk/5/