Gibt es eine Möglichkeit, die Mitte des Kreises an der Spitze der grauen Rechtecke auszurichten?

Question

Ich möchte, dass die Kreise vertikal ausgerichtet sind, so dass die Mitte des Kreises mit der Oberseite der Div-Box übereinstimmt.

Gibt es einen Weg, um die "reaktionsschnellste" zu machen, wenn das sinnvoll ist.

CSS: 
    #feature .feature-thumb { 
     background-color: #eaeaea; 
     position: relative; 
     padding: 40px; 
     margin-top: 32px; 
    } 

    #feature .feature-icon { 
     background-color: #64beeb; 
     width: 85px; 
     height: 85px; 
     margin: 0 auto; 
     top: 0; 
     position: relative; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -ms-border-radius: 50%; 
     border-radius: 50%; 
     display: table; 
     text-align: center; 
     vertical-align: middle; 
     transition: all 0.4s ease-in-out; 
    } 

    #feature .feature-icon:hover { 
     background-color: #eaeaea; 
    } 

    #feature .feature-icon span { 
     display: table-cell; 
     vertical-align: middle; 
    } 
    #feature .feature-icon .fa { 
     color: #ffffff; 
     font-size: 36px; 
     margin: 0; 
     padding: 0; 
    } 

Codepen Demo

Answer 1

Versuchen Sie Folgendes:

#feature .feature-icon { 
    background-color: #64beeb; 
    width: 85px; 
    height: 85px; 
    top: 0; /* Changed here */ 
    left: 50%; /* Changed here */ 
    position: absolute; /* Changed here */ 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    display: table; 
    text-align: center; 
    vertical-align: middle; 
    transition: all 0.4s ease-in-out; 
    transform: translate(-50%, -50%); /* Changed here */ 
    -webkit-transform: translate(-50%, -50%); /* Changed here */ 
    -ms-transform: translate(-50%, -50%); /* Changed here */ 
    -o-transform: translate(-50%, -50%); /* Changed here */ 
    -moz-transform: translate(-50%, -50%); /* Changed here */ 
} 

Answer 2

Sie benötigen feature_icon mit der folgenden Art zu setzen:

position: absolute; 
margin-top: -42.5px; 
left: 50%; 
margin-left: -42.5px; 

Und Sie brauchen die Polsterung setzen auf #feature .feature-thumb

padding:0px 40px 40px 40px; 

Das werden Sie erhalten begonnen .. Sie müssen Ihren Text immer noch mit e drücken Polster oder Rand, weil es mit dieser CSS Änderung an die Spitze der grauen Box ausgerichtet wird.

Answer 3

Wenn Sie diesen Symbolkreis nur kleine Bildschirme anpassen möchten, können Sie die Medienabfrage @media dafür verwenden und dann können Sie Stil, den Sie möchten. Und wenn Sie dies für alle Bildschirm möchten, können Sie diesen Stil auch außerhalb der Medienabfrage in Symbol Klassenstil verwenden, die Sie bereits verwenden. Hier ist das gelöste Beispiel des Projektes

@media screen and (max-width: 768px) and (min-width: 320px){ 
    #feature .feature-icon { 
     top:-70px; 
    } 
} 

Codepen