Forums

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

Home Forums CSS RE: Text not centered in Div Cell

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #252921
    motion2082
    Participant

    Hey guys,

    Trying to centre the text on the left column but everytime I create a css rule it effects the right column
    https://tinyurl.com/mpelw6n

    Can anyone please help, Im pulling my hair out

    Regards,
    Motion

    #252923
    Beverleyh
    Participant

    We are unable to troubleshoot an image – we need to see their markup and CSS – but if you put up a reduced demo in CodePen, we’ll be able to offer suggestions.

    #252924
    motion2082
    Participant

    Hi Beverleyh,

    The url above is not an image, it’s a tinyurl link so google doesn’t index the URL :)

    #252925
    Shikkediel
    Participant

    This ought to work:

    .divTableCell:first-child {
    text-align: center;
    }
    

    Edit – apart from the bottom two apparently…

    #252926
    motion2082
    Participant

    Almost, looking to keep the text left aligned but centre the vertical space

    #252928
    Atelierbram
    Participant
    .divTableCell:first-of-type {
      text-align: center;
      vertical-align: middle;
    }
    
    #252929
    Beverleyh
    Participant

    LOL! My mistake. I was skimming the forum on mobile and thought it was a tinypic URL! Probably couldn’t have been much use on mobile anyway in this case… although CodePens don’t come with the same limitations for mobile users so it’s worth keeping it in mind for the future :)

    #252930
    motion2082
    Participant

    No worries Bev :) I do that sometimes too

    Thank you Atelierbram that did the trick.

    #252931
    Shikkediel
    Participant

    I think I’m prejudiced when it comes to centering, lol.
    Didn’t even cross my mind it could be about vertical.

    #252970
    Mottie
    Member

    @motion2082 Have you see this article? https://css-tricks.com/centering-in-the-unknown/

    Newer methods use flexbox:

    http://codepen.io/Mottie/pen/GWQQeL

    div {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.