Ich suche eine elegantere Möglichkeit, die richtigen Symbole vertikal mit dem linken Text auszurichten, da der negative Rand ein bisschen ein Hack sein könnte.Ausrichten von Symbolen mit Text ohne Verwendung eines negativen Randes

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 
} 
 

 
div.icons { 
 
    margin-top: -1.65em; 
 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
    float: right; 
 
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 

 
<div class="main"> 
 
    <div class="summary">Some text</div> 
 
    <div class="icons pull-right"> 
 
    <div class="icon fa fa-line-chart"> 
 
    </div> 
 
    <div class="icon fa fa-bar-chart"> 
 
    </div> 
 
    </div> 
 
</div>

2016-12-01 Michiel Borkent

besser 'Anzeige zu verwenden Inline-block' mit' vertical-align: middle'. Sie vermeiden, Dinge wie negativen Rand zu setzen, der nicht wirklich gut ist. – Mardzis

@Mardzis Ich würde hinzufügen, dass jede "magische Zahl" zerbrechlich ist, denn wenn Sie sie immer wieder zurückstellen müssen, wenn Sie nur einen kleinen Teil refaktorieren müssen, werden Sie am Ende viel zu viel Arbeit tun –

Sie können nach wie vor einen benutzerdefinierten Stil verwenden, wenn Sie brauchen:

Ihren Code verwendet:

Mit Flexbox

Unterstützung ie10+

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 

 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 

 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
    float: right; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="main"> 
 
    <div class="summary">Some text</div> 
 
    <div class="icons"> 
 
    <div class="icon fa fa-line-chart"> 
 
    </div> 
 
    <div class="icon fa fa-bar-chart"> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Verwenden von Tabellen Arten

Unterstützung ie8+

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 

 
    display: table; 
 
    width: 100%; 
 

 
} 
 

 
div.summary { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
    float: right; 
 
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
<div class="main"> 
 
    <div class="summary">Some text</div> 
 
    <div class="icons"> 
 
    <div class="icon fa fa-line-chart"> 
 
    </div> 
 
    <div class="icon fa fa-bar-chart"> 
 
    </div> 
 
    </div> 
 
</div>

haben einen Blick auf this flexbox guide oder this guide on flexbox without flexbox.

Sehen Sie sich auch deutliche Klassennamen, die Tags nicht abhängig sind, das heißt einen Blick auf BEM

Quelle

2016-12-01 15:16:18 chitzui

Danke! Ich bevorzuge deine Lösung mit justify-content: space-between, da ich dadurch auch den float löschen kann: direkt von den Icons (ich muss sie einfach nochmal im html umkehren) –

Ein guter Weg ist, sowohl zu setzen, das Symbol und den Text, in separaten Element und dann geben sie die folgende CSS-Eigenschaft:

.mySelectors{ 
    display: inline-block; 
    vertical-align: middle; 
}

Quelle

2016-12-01 14:52:14

Wenn flexbox eine ist option, einfach hinzufügen display: flex für main und für die icons dies für die horizontale positionierung:

div.icons { 
    margin-left:auto; 
}

und für die vertikale Ausrichtung.

Siehe Demo unter:

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
div.icons { 
 
    margin-left:auto; 
 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="main"> 
 
    <div class="summary">Some text</div> 
 
    <div class="icons pull-right"> 
 
    <div class="icon fa fa-line-chart"> 
 
    </div> 
 
    <div class="icon fa fa-bar-chart"> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Quelle

2016-12-01 14:55:28 kukkuz

Der Text doesn scheint nicht in der Mitte des Elternteils zu liegen. –

@MichielBorcent hinzufügen 'align-items: center' too ... check it now ... – kukkuz

Sie einfach flexbox, dies zu tun verwenden können.

Bewerben display: flex Mutter die
div.main in Ihrem Fall ist und gelten margin-left: auto auf das Kind, das Sie mit der rechten Seite des Fensters ausrichten möchten.

Etwas wie unten.

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 
    display: flex; 
 
} 
 

 
div.icons { 
 
    margin-left: auto; 
 
    /*margin-top: -1.65em;*/ 
 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
    float: right; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
    </head> 
 

 
    <body> 
 

 
    <div class="main"> 
 
     <div class="summary">Some text</div> 
 
     <div class="icons pull-right"> 
 
     <div class="icon fa fa-line-chart"> 
 
     </div> 
 
     <div class="icon fa fa-bar-chart"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 
</html>

Hope this Sie in irgendeiner Weise helfen (y).

Flex-Box Referenz - complete flexbox reference

Quelle

2016-12-01 14:58:48 pradeep1991singh

können Sie verwenden CSS Flexbox. Und nutzen Sie die align Eigenschaften von flex. Werfen Sie einen Blick auf das Snippet unten:

div.main { 
 
    border: 1px solid black; 
 
    padding: 14px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
div.summary { 
 
    flex: 1; 
 
} 
 

 
div.icon { 
 
    font-size: 2rem; 
 
    color: blue; 
 
    border: 0.1px solid blue; 
 
    border-radius: 3px; 
 
    margin-left: -1px; 
 
    padding: 3px; 
 
    float: right; 
 
}

<html> 
 
<head> 
 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="main"> 
 
    <div class="summary">Some text</div> 
 
    <div class="icons"> 
 
    <div class="icon fa fa-line-chart"> 
 
    </div> 
 
    <div class="icon fa fa-bar-chart"> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

hoffe, das hilft!

Quelle

2016-12-01 14:58:53

Ausrichten von Symbolen mit Text ohne Verwendung eines negativen Randes

Antwort

Mit Flexbox

Verwenden von Tabellen Arten

Verwandte Themen