Wie richtet man Bilder und Text in CSS aus?

Question

Ich möchte Bilder und Text entsprechend ausrichten.

Ich verwende den folgenden Code. Bitte zeig mir, wie es geht.

<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>

Answer 1

Legen Sie eine feste Breite für die Symbole fest und geben Sie eine margin-right ein, setzen Sie text-align: center, um die Symbole in der Mitte auszurichten.

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

Wenn Sie schauen, um die Aufzählungszeichen-Symbole zu machen:

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/

Andernfalls, wenn Sie für bestimmte Ausrichtung von zwei verschiedenen Elementen suchen:

Vertically align text next to an image?

how to vertically align text next to a floated image?

Hoffe, dass diese Links helfen. Viel Glück! :)

Answer 3

Erhalten Sie wie folgt aus:

In diesem Code i font awesome bin mit Mehr Symbol der Bibliothek zur Verfügung

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 vertical-align Eigenschaft löst es.

a {vertikal ausgerichtet: Mitte; }