Part 5/6 - Centering the text


#1

Hi,

Here is the link regarding my query.

https://www.codecademy.com/en/courses/web-beginner-en-UuBLw/0/5?curriculum_id=50579fb998b470000202dc8b


The code is alright, i am just wondering how can I center the link "Click Me" relative to the box it is found inside and not only relative to the line it is found in. Because like this, there is quite more margin in the bottom and there is in the top.


div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    border-style: solid;
    border-radius: 5px;
    background-color: #BCD2EE;
    margin: auto;
    text-align: center;
}

a {
    text-decoration: none;
    color: black;
    font-family: Impact;
}

Thank you!


#2

vertical centering is difficult, thankfully someone wrote something very useful:


#3

Thanks a lot!

I managed to center it both by wrapping only the text as wrapping whole division in the link tag.

I used position: relative; and manually centering with top: value;

Although when doing the version of the button to be the link (not the text) i had to mark the text so i could center it.

Here is the code:

div {
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    border-style: solid;
    border-radius: 5px;
    background-color: #BCD2EE;
    margin: auto;
    text-align: center;
}

a {
    text-decoration: none;
    font-size: 16px;
    color: black;
    font-family: Impact;
    position: relative;
    top: 15px;
}

span {
    text-decoration: none;
    font-size: 16px;
    color: black;
    font-family: Impact;
    position: relative;
    top: 15px;
}

It feels really great to solve a problem since this is my only 3rd day on your website.

Cheers!


#4

Just realized i could use multi selectors :confused:

div {
height: 50px;
width: 120px;
border-color: #6495ED;
border-style: solid;
border-radius: 5px;
background-color: #BCD2EE;
margin: auto;
text-align: center;
}

a, span {
text-decoration: none;
font-size: 16px;
color: black;
font-family: Impact;
position: relative;
top: 15px;
}

#5

solving problems feels great indeed

i am personally not a big fan wrapping division in link tag

i would make the link tag a block:

a {
    display: block;
}

now the link is a block, now it can have a width and a height. So the whole element is clickable


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.