f



centre text in a

I have this HTML

<a href="note.pdf">NOTE</a>

and this related CSS

a {
   display: block;
   width: 172px;
   height: 28px;
   font-size: 0.7em;
   color: darkblue;
   text-align: center;
   text-decoration: none;
   background-color: white;
   border: 1px solid #6FA0CC;
   border-radius: 14px;
}

Vertically the text in the anchor appears above centre. Is it possible 
to get the text to centre vertically with just CSS or do I need to first 
wrap the text in, say, a span?

Andrew Poulos
0
Andrew
11/17/2016 1:31:21 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

2 Replies
97 Views

Similar Articles

[PageSpeed] 53

On 17/11/2016 03:31, Andrew Poulos wrote:
> I have this HTML
>
> <a href="note.pdf">NOTE</a>
>
> and this related CSS
>
> a {
>   display: block;
>   width: 172px;
>   height: 28px;
>   font-size: 0.7em;
>   color: darkblue;
>   text-align: center;
>   text-decoration: none;
>   background-color: white;
>   border: 1px solid #6FA0CC;
>   border-radius: 14px;
> }
>
> Vertically the text in the anchor appears above centre. Is it possible
> to get the text to centre vertically with just CSS or do I need to first
> wrap the text in, say, a span?

A quick and effortless way: replace the 'height' property with 
'line-height'.

-- 
Best wishes, Osmo
0
Osmo
11/17/2016 4:49:50 AM
Andrew Poulos wrote:

> I have this HTML
> 
> <a href="note.pdf">NOTE</a>
> 
> and this related CSS
> 
> a {
>    display: block;
>    width: 172px;
>    height: 28px;
>    font-size: 0.7em;
>    color: darkblue;
>    text-align: center;
>    text-decoration: none;
>    background-color: white;
>    border: 1px solid #6FA0CC;
>    border-radius: 14px;
> }
> 
> Vertically the text in the anchor appears above centre. Is it possible
> to get the text to centre vertically with just CSS or do I need to first
> wrap the text in, say, a span?

Yes.

How long have you googled before posting the question?

<http://catb.org/esr/faqs/smart-questions.html>


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).
0
Thomas
11/17/2016 9:39:02 AM
Reply: