I am using the following HTML:
<p><a href="http://www.example.com/">← Back</a></p>
To create the following:
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question : how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE :
Is it possible for me to vertically adjust/align this:
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span
or something) to move it up 1 or 2 px ( position:relative: top:-2px;
).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam )
您可以将箭头包装在SPAN标记中,然后使用line-height和vertical-align CSS属性进行播放。
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px
, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr
.
It IS possible to have the &larr
in a separate span
, have some specific padding to bring the arrow to the right position , or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
span
, give it display: inline-block
and position: relative
and play with vertical paddings, margins and line-heights until you're satisfied. You have some options: 1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative . 2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, eg
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter
a try. It only works on block-level elements, so you'll need to work accordingly, eg
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.