: avant,: après et rembourrage
J'ai le code css suivant-code:
.readMore:before {
content: '';
display: block;
float: left;
width: 10px;
height: 27px;
margin: 0;
background: red url('images/button.png');
background-position: 0 0;
}
.readMore {
float: left;
height: 24px;
background: url('images/button.png');
background-position: -10px 0;
border: 0;
margin: 0;
padding: 4px 0 0 0;
cursor: pointer:
}
.readMore:after {
content: '';
display: block;
float: right;
width: 10px;
height: 27px;
margin: 0;
top: -3px;
background: red url('images/button.png');
background-position: -411px 0;
}
De styles d'un lien qui ressemble à ceci:
Mais lorsque j'essaie de modifier le texte dans la .readMore à la verticale dans le :before et :after images également obtenir des "sauts" vers le bas. Ce qui est logique, mais est-il une solution de sorte qu'elle corresponde mieux à la "le total de l'image"?
source d'informationauteur JohnSmith
Vous devez vous connecter pour publier un commentaire.
J'ai tendance à utiliser
absolute
positionnement :before et :after éléments. Ensuite, vous pouvez faire ce que vous voulez pour le parent sans vous soucier de votre pseudoelements aller n'importe où (à moins, bien sûr, que vous déplacez l'élément lui-même).Vue sur JSFiddle
html
css
Cela montre comment les agencer. Vous pouvez ensuite utiliser n'importe quelle méthode que vous souhaitez ajuster la position du texte dans le parent.
Les points clés du code ci-dessus sont les suivantes:
Si vous voulez centrer le texte dans le parent
div
verticalement, et c'est juste une seule ligne, vous pouvez définir la ligne de hauteur égale à la hauteur du contenant. Vue qu'ici. Ce serait mieux que "deviner" le rembourrage pour faire centrée verticalement, si c'est ce que vous allez pour.Bien sûr, il existe d'autres moyens pour centrer le texte verticalement, trop, et en conséquence il y a beaucoup de questions sur le sujet. Voici juste un.