Zentrieren von Symbolen auf der Website

Ich habe ein Problem.Zentrieren von Symbolen auf der Website

Ich möchte auf einer Website drei Symbole zum Zentrum etwa so: http://prntscr.com/cte4kt

Einschließlich dem Text darunter.

Ich habe auf Google gesucht, aber ich hatte keine guten Ergebnisse. Wenn jemand ein einfaches Beispiel zeigen könnte, wäre das wirklich großartig.

das ist, was ich versucht:

<div class="testDiv"> 
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png"> 
<h3>Insert text</h3> 
<h4>This is an actual test<br> 
I really mean it lol. 
</h4> 

<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png"> 
<h3>Insert text</h3> 
<h4>This is an actual test<br> 
I really mean it lol. 
</h4> 

<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png"> 
<h3>Insert text</h3> 
<h4>This is an actual test<br> 
I really mean it lol. 
</h4>

CSS: http://pastebin.com/v0cc1cXg

Thankyou.

Quelle

2016-10-13 dedebaz6

Willkommen bei Stack Overflow! Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu programmieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

Sorry, gerade hinzugefügt, was ich versucht habe – dedebaz6

Ich denke, dass Sie bereits einige grundlegende HTML/CSS-Sachen kennen, also würde ich Ihnen empfehlen, einige der beliebten Front-End-Frameworks wie Bootstrap oder Zurb Foundation zu verwenden. Es ist fast nur Kopieren/Einfügen.

Quelle

2016-10-13 15:55:38 Mardzis

Sie meinen also, ich muss dies in Bootstrap tun? Nicht in HTML/CSS? – dedebaz6

@ Debebaz6: Sie müssen nicht. Aber wenn Sie Zeit sparen möchten, indem Sie mehr über HTML und CSS lernen. Dies könnte perfekt für Sie sein oder beginnen Sie hier mit dem Lernen von HTML und CSS: http://www.w3schools.com/html/default.asp – Mardzis

Sie können etwas wie Bootstrap oder Primercss verwenden, die Ihnen Klassen zum Hinzufügen von Zeilen und Spalten zum Layout Ihres Inhalts geben.

Sie auch Ihre eigenen wie das Beispiel, das ich here tat schaffen könnten

<div class="container"> 
    <div class="row"> 
     <div class="col3 center"> 
      <div class="inner-container"> 
      <i>icon</i> 
      <div>text</div> 
     </div> 
    </div> 
    <div class="col3"> 
     <div class="inner-container"> 
     <i>icon</i> 
     <div>text</div> 
     </div> 
    </div> 
    <div class="col3"> 
     <div class="inner-container"> 
     <i>icon</i> 
     <div>text</div> 
     </div> 
    </div> 
    </div> 
</div> 

.container { 
    position: relative; 
    width: auto; 
    height: 200px; 
} 

.row { 
    width: 100%; 
    height: 100%; 
} 

.col3 { 
    float: left; 
    width: 33.3%; 
    height: 100%; 
    background: grey; 
} 

.inner-container { 
    position: relative; 
    top: 30%; 
    text-align: center; 
}

Grundsätzlich müssen Sie irgendeine Art von Container-Layout erstellen (Breite: 100%) mit drei Spalten durch Drittel geteilt (Breite: 33,3%). Dann positionieren Sie innerhalb jeder dieser Spalten den Inhalt mit (text-align: center), um den Inhalt horizontal auszurichten und ihn über etwas wie top: 30% auszurichten oder wenn Sie auch einen Inline-Block mit vertical-align erstellen könnten: Mitte.

Quelle

2016-10-13 16:50:29 highlanderkev

Vielen Dank für Ihre Antwort, das Problem ist jetzt behoben – dedebaz6

Zentrieren von Symbolen auf der Website

Antwort

Verwandte Themen