Forums

  • # March 19, 2017 at 12:31 am

    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

    # March 19, 2017 at 1:00 am

    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.

    # March 19, 2017 at 2:36 am

    Hi Beverleyh,

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

    # March 19, 2017 at 2:59 am

    This ought to work:

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

    Edit – apart from the bottom two apparently…

    # March 19, 2017 at 3:04 am

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

    # March 19, 2017 at 3:26 am
    .divTableCell:first-of-type {
      text-align: center;
      vertical-align: middle;
    }
    
    # March 19, 2017 at 3:44 am

    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 :)

    # March 19, 2017 at 4:55 am

    No worries Bev :) I do that sometimes too

    Thank you Atelierbram that did the trick.

    # March 19, 2017 at 5:28 am

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

    # March 20, 2017 at 11:58 am

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

    Newer methods use flexbox:

    div {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag