Consente di prendere due immagini come esempiofloat: sinistra; ambiguità - CSS
Confloat: left;
Senzafloat: left;
HTML
<h6><span>Sign Up</span></h6>
CSS
h6:before {
content: url("images/arrow.png");
padding-right: 8px;
float: left; // Here lies problem
}
Domanda
Perché senzafloat: left; testo (Registrazione) va giù? Qual è la scienza dietro a questo?
La modalità di visualizzazione predefinita di uno pseudo elemento è display: inline; e l'allineamento verticale predefinito è vertical-align: baseline;. Ciò significa che l'immagine sarà allineata alla linea di base del testo.
Quando si float un elemento la modalità di visualizzazione diventa display: block; e viene rimossa dal flusso di documenti. L'allineamento verticale non è più un fattore e in questo caso il bordo superiore dello span è ora allineato con il bordo superiore dello pseudo elemento flottato.
Come Luis PA e Paulie_D alludono nelle osservazioni, cambiando l'allineamento verticale consentirà l'elemento non flottato pseudo ad essere allineato con il centro del testo:
h6:before {
content: url("http://placehold.it/20x20");
display: inline-block;
padding-right: 8px;
vertical-align: middle;
}
h6 span {
vertical-align: middle;
}<h6><span>Sign Up</span></h6>lo stesso vale per 'float: right;' ?? ... per quanto riguarda 'float: none;' ?? – Junaid
@Junaid Yup lo stesso vale per 'float: right;'. 'float: none;' non prenderà l'elemento fuori dal flusso del documento, né lo cambierà in 'display: block; 'quindi funzionerà ancora come un elemento' inline'. –
Penso che sia perché è necessario impostare 'vertical-align'. Su float di default è già impostato'vertical-align' –
Sì, il default sarebbe' baseline' per l'allineamento verticale ... 'middle' sarebbe essere migliore. –
@ LuisP.A. hai ragione, grazie :) – Junaid