Wie wird das Symbol an der Mitte des div-Elements ausgerichtet?

Ich möchte Symbol auf das div-Element "Rechteck" zentrieren. Jede andere alternative Lösung wird ebenfalls begrüßt.Wie wird das Symbol an der Mitte des div-Elements ausgerichtet?

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 125px; 
 
\t height: 125px; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t background-color: #fff; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span> 
 
</div> 
 
<h3>Quora</h3>

Quelle

2017-01-14 Akshay Rahate

für ansprechende Lösung suchen –

http://stackoverflow.com/q/19461521/483779 – Stickers

@putvande: Sein Versuch ist bereits in seiner Frage. –

hinzufügen position: relative;-.rectangle und die folgende CSS für das Symbol:

.fa-quora { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    }

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 125px; 
 
\t height: 125px; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t background-color: #fff; 
 
    position: relative; 
 
} 
 
.fa-quora { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;"></i></span> 
 
</div> 
 
<h3>Quora</h3>

Quelle

2017-01-14 15:30:28 Johannes

von Addin

g dies zu Ihrem .rectangle Klasse

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

Beispiel Schnipsel

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 125px; 
 
\t height: 125px; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t background-color: #fff; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span> 
 
</div> 
 
<h3>Quora</h3>

Wenn Sie ältere Browser unterstützen möchten, fügen Sie diese zu Ihrer .rectangle Klasse

display: table-cell; 
text-align: center; 
vertical-align: middle;

Beispiel Schnipsel

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 125px; 
 
\t height: 125px; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t background-color: #fff; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span> 
 
</div> 
 
<h3>Quora</h3>

Quelle

2017-01-14 15:36:01 LGSon

+1, weil ich glaube, dass mehr Leute Flexbox verwenden sollten. Es ist erstaunlich, wie viele JavaScript-Zeilen Sie speichern können. –

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 125px; 
 
\t height: 125px; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t background-color: #fff; 
 
\t position: absolute; 
 
\t left: 50%; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px; position: absolute; left: 50%;"></i></span> 
 
</div> 
 
<h3>Quora</h3>

Quelle

2017-01-14 15:36:07 Zer0

Ich bin nicht sicher, was Ihr fragen ...

Sie einige Pixel in padding-left hinzufügen und padding-top auf rectangle Klasse. Danach reduzieren Sie die Breite und die Höhe mit der gleichen Anzahl von Pixeln. Aber andere Zeichen als Q können ein anderes Rendering haben.

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width: 98px; 
 
    height: 98px; 
 
    padding-top: 22px; 
 
    padding-left: 22px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <div class="rectangle"> 
 
     <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span> 
 
    </div> 
 
<h3>Quora</h3>

Hier ist ein weiteres Beispiel ohne Höhe zu befestigen. Es benutzt Flex.

body { 
 
    background-color: black; 
 
} 
 

 
.rectangle { 
 
    width:125px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
} 
 

 
h3 { 
 
    color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="rectangle"> 
 
    <span><i class="fa fa-quora" aria-hidden="true" style="font-size: 75px;" align="center"></i></span> 
 
</span> 
 
<h3>Quora</h3>

Quelle

2017-01-14 15:39:45

Wie wird das Symbol an der Mitte des div-Elements ausgerichtet?

Antwort

Verwandte Themen