Viewing 4 replies - 1 through 4 (of 4 total)
  • Are you still seeing the same alignment shown in that screenshot? If so, what browser are you using?

    When I view your site (or others with Argent active) I don’t see the same issue.

    Here’s your site for me, in Chrome: https://cloudup.com/cgwGGGhBNWK

    Thread Starter phoebechuaky

    (@phoebechuaky)

    Hi Chad,

    I’ve fixed the issue with my CSS code above: .project-title {top: 43%}. The screenshot that I sent you was when I used the theme’s default code, where it was .project-title {top: 50%}.

    I was just wondering if there was a better way to solve my issue 🙂

    – Phoebe

    Disclaimer: What you have now doesn’t look all that bad to me.

    One option to handle vertical centering is Flexbox, though you need to override some other properties on both .project-title and .project-summary:

    .project-summary {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    .project-title {
    	margin: 0;
            position: static;
    	-webkit-transform: none;
    	-ms-transform: none;
    	transform: none;
    }

    Disclaimer 2: Flexbox is fairly well-supported amongst modern browsers, but there are a few minor bugs here and there and it doesn’t work at all in Internet Explorer 9 or earlier. You know your audience and whether that will cause a problem or not.

    Thread Starter phoebechuaky

    (@phoebechuaky)

    @stephencottontail, that’s perfect! Thanks so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to vertically center text in project image’ is closed to new replies.