Fügen Sie Text unter den Symbolen im Menü

Question

hinzu Ich bin neu in CSS und HTML. Ich habe eine Menüleiste erstellt, die 8 Symbole in einer Reihe enthält. Ich möchte Text unter jedem Symbol zentrieren, aber egal, wo ich den Text im HTML hinzufüge, es vermasselt alles. Ich habe alles versucht, was mir einfällt. Jede Hilfe würde sehr geschätzt werden. Vielen Dank! Hier

<div class="icon-bar"> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/ria- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon"   
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
ria.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/yoga- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
yoga.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/abit- 
stroke.png"></span> 
<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
abit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<img class="esm-icon-active" src="http://treehouserecoverypdx.com/wp- 
content/uploads/2017/05/circle-esm.png"> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/pg- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
pg.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/lit- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
lit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/1on1- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
1on1.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/education- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
education.png"></span> 
</span></a> 

</div> 

ist die CSS:

#surround{ 
display:inline-block; 
width:12.2%; 
} 
#onhover { 
display: none; 
} 
#surround:hover span[id="initial"] { 
display: none; 
} 
#surround:hover span[id="onhover"] { 
display: block; 
} 

.icon-bar { 
width: 100%; 
overflow: hide; 
padding-top: 7px; 
background-color:black; 
padding-bottom:100px; 
} 

.icon-bar a { 
float: right; 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

.esm-icon { 
opacity:0.5!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 


.esm-icon-active { 
opacity:1!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 

Answer 1

Ich glaube, ich habe eine Lösung für Sie. Zuerst werde ich einen Screenshot anhängen, um Ihnen das Ergebnis meiner Lösung zu zeigen, und dann werde ich Ihnen sagen, was ich getan habe.

Hier ist der Screenshot:

Der Text, den ich unter jedem Symbol hinzugefügt war nur: "Das ist ein Test". Ok, jetzt lass mich erklären, was ich getan habe und warum.

Wirklich war es im Grunde 2 Dinge, die ich tat. Die erste Sache war in Ihrem CSS-Code, ich habe 1 Zeile auskommentiert. Hier ist es:

.icon-bar a { 
/*float: right;*/ 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

Das "float: rechts" war das Hauptproblem. Leider kann ich keine genaue Erklärung geben, warum der Float auf der rechten Seite das Problem war, aber ich habe vor ein paar Monaten eine Website erstellt, wo ich Dinge in meiner Navbar richtig verteilt hatte, und das Gleiche passierte mir.

Ich weiß nicht, ob Sie Dinge richtig schweben, weil Sie die Symbole in einer bestimmten Reihenfolge wollten, aber wenn das der Fall ist, dann anstatt zu versuchen, die Reihenfolge durch Floats (immer eine schlechte Idee) zu bekommen, Ich würde einfach die Symbole in den Code in der Reihenfolge eingeben, in der sie an erster Stelle erscheinen sollen. Das wird dir viele Kopfschmerzen als zukünftige Übung ersparen.

Ich sagte, es gab zwei Dinge, die ich getan habe. Hier ist die zweite ...

Ich legte den Text direkt nach jedem Symbol im Code. Hier ist, wie ich es geändert habe. Sehen Sie sich genau an, wie ich den Text in die Spannen für das Bild platziert habe, das eine Klasse von "Surround" hatte.

HTML

<div class="icon-bar"> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/ria- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon"   
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
ria.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/yoga- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
yoga.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/abit- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
abit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<img class="esm-icon-active" src="http://treehouserecoverypdx.com/wp- 
content/uploads/2017/05/circle-esm.png"><p>This is a test</p></span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/pg- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
pg.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/lit- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
lit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/1on1- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
1on1.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/education- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
education.png"></span> 
</span></a> 

</div> 

den Text direkt nach dem Code für das Bild Indem der Text würde sich zentriert unter den Symbolen standardmäßig, weil Sie die „Surround“ Klasse angezeigt als „Inline- Block". Hier ist die CSS-Code ... Ich habe eine Schriftfarbe „weiß“ der p-Tag hinzufügen, nur damit Sie den Text sehen konnte:

CSS

p { 
    color: white; 
} 

#surround{ 
display:inline-block; 
width:12.2%; 
} 
#onhover { 
display: none; 
} 
#surround:hover span[id="initial"] { 
display: none; 
} 
#surround:hover span[id="onhover"] { 
display: block; 
} 

.icon-bar { 
width: 100%; 
overflow: hide; 
padding-top: 7px; 
background-color:black; 
padding-bottom:100px; 
} 

.icon-bar a { 
/*float: right;*/ 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

.esm-icon { 
opacity:0.5!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 


.esm-icon-active { 
opacity:1!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 

Ich hoffe, das hilft! Eine Sache noch. Ich habe festgestellt, dass Sie im CSS für ".icon-bar" einen "padding-bottom: 100px" haben. Natürlich, wenn Sie nicht so viel Platz unter den Symbolen und Text haben möchten, könnten Sie es einfach mit 20px oder so etwas füllen.

Lassen Sie mich wissen, wie das für Sie funktioniert.