CSS에서 이미지와 텍스트를 정렬하는 방법은 무엇입니까?

Question

이미지와 텍스트를 적절하게 정렬하고 싶습니다.

다음 코드를 사용하고 있습니다. 어떻게하는지 알려주세요.

Answer 1

다음 그것을 margin-right을 줄 아이콘에 대한 고정 폭을 설정, 정렬 된 아이콘 센터를 만들기 위해 text-align: center을 설정합니다.

ul { margin: 0; padding: 0; list-style: none; } 
 
a { text-decoration: none; } 
 
i.fa { 
 
    width: 20px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<ul> 
 
    <li> 
 
    <a href=""><i class="fa fa-user icon-profile"></i> Profile</a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="fa fa-file icon-wallet"></i> Wallet</a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="fa fa-home icon-home"></i> Home</a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="fa fa-file icon-signout"></i> Sign Out</a> 
 
    </li> 
 
</ul>

Answer 2

<ul> 
 
    <li> 
 
    <a href=""><i class="icon-profile"></i> </a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="icon-wallet"></i> Wallet</a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="icon-home"></i> Home</a> 
 
    </li> 
 
    <li> 
 
    <a href=""><i class="icon-signout"></i> Sign Out</a> 
 
    </li> 
 
</ul>

당신은 글 머리 기호 아이콘 만들기 위해 찾고 있다면 :

Using Font Awesome icon for bullet points, with a single list item element

https://www.sitepoint.com/use-webfont-icons-bullet-points-html5-lists/

을 당신이 두 개의 서로 다른 요소의 특정 정렬을 찾고 그렇지 않은 경우 http://techforluddites.com/replacing-list-bullets-with-images-using-css/

:

Vertically align text next to an image?

how to vertically align text next to a floated image?

이러한 링크가 도움이 바랍니다. 행운을 빌어 요! :)

Answer 3

당신이 이런 식으로 점점 : 내가 font awesome 더 많은 아이콘의 라이브러리를 사용하고이 코드에서

수 있습니다

1. https://material.io/icons/

2. http://www.w3schools.com/icons/

ul{list-style:none;} 
 
a{text-decoration: none;} 
 
ul a i{ 
 
padding-left:10px; 
 
    margin:0 20px auto; 
 
    text-indent:2px; 
 
    
 
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<ul> 
 
      <li> 
 
       <a href=""><i class="fa fa-user icon-profile"></i> profile</a> 
 
      </li> 
 
      <li> 
 
       <a href=""><i class=" fa fa-file icon-wallet"></i> Wallet</a> 
 
      </li> 
 
      <li> 
 
       <a href=""><i class=" fa fa-home icon-home"></i> Home</a> 
 
      </li> 
 
      <li> 
 
       <a href=""><i class="fa fa-file icon-signout"></i> Sign Out</a> 
 
      </li> 
 
</ul>

Answer 4

CSS 수직 정렬 속성을 해결한다.

{세로 정렬 : 중간; }