Trouble Relatively Centering an Text Element

[ikemikek]

https://codepen.io/ikemikek/pen/WrjNwa

I’d like to center the “Get Started” text. I’d like there to be box around it with approximately 10px padding. I realize this is extremely elementary, however this is my first site. I’d also like it to be positioned about 20px below the <h> element. Also, I have gotten the text positioned correctly, but then when I resize the browser window it is no longer positioned right.

Thanks for any and all help!

[Gary Pickles]

Hi Imkemikek,

If you change to below

.feature p {
padding: 10px;
font-size: 40;
border: solid;
border-color: black;
width: 10%;
margin: 0 auto;
text-align:center;
}

[Paulie_D]

Firstly, you really don’t need to put the link in a p tag…so I’d lose that.

Then set .feature to text-align:center and it will center autmatically (assuming you remove the p tag wrapping it.

Next…font-size:40 is an invalid value.

So..

.feature {
  text-align: center;
}

.feature h1 {
  padding-top: 175px;
  margin: 50px;
  color: white;
  font-family: "fira-sans-2", sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 65;
  text-align: center;
}

.feature a {
  padding: 10px;
  font-size: 40px;
  border: solid;
  border-color: white;
  position: relative;
  color: white;
  text-decoration: none;
}

Gets you

http://codepen.io/Paulie-D/pen/pgPoaM

Moving things with positioning (relative/absolute etc) should b reserved for specific effects..not tweaking things into place because you can’t quite line them up properly.

That’s what general layout, margins & padding are for.

[ikemikek]

Thanks so much @Paulie_D and @Gary Pickles!
That solved my issue completely–and yes, I freely admit I have no clue what I’m doing. Ha.
Thanks a lot

[bearhead]

Take a look at this pen:

http://codepen.io/kvana/pen/EPmayv

I cleaned up your html and css. In codepen you don’t need head and body tags. Any css or js that is in the head should be included via the “pen settings” modal.

I edited the css, so that .feature would be centered horizontally and vertically (It seemed like that was what you were after?)

Also, I noticed some incorrect syntax. In your html, your nav ul was structured incorrectly. In a ul, only an li element can be a direct child. You had some divs in there that were messing things up.

There was also a problem with how you wrote the css for the body background. I rewrote the declarations individually, so you could see how those are supposed to work.

[Author]

Posts