Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble Relatively Centering an Text Element

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #236485
    ikemikek
    Participant

    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!

    #236488
    Gary Pickles
    Participant

    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;
    }

    #236489
    Paulie_D
    Member

    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.

    #236490
    ikemikek
    Participant

    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

    #236491
    bearhead
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.