0

So i'm creating a design for all kinds of phone screens. Instead of using multiple @media queries, im creating a design based on percentages and acceptable to all varieties of screens.

One of the things that should be included is a portfolio 'list'. Which is a list of items, each containing an image (that should adjust itself automatically to the size of the container it's in) and a title, next to it.

However: Instead of positioned at the top, it should be vertically centered. I've tried a few suggestions on Stackoverflow and other sites. But couldn't get anything to work.

Please check this JSfiddle

I've couldn't get things to work, such as

div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

So I hope someone knows an solution. Just keep in mind: It should be percentage based, since all the rest is too.

1 Answer 1

1

Perhaps you're looking for something like this: JSFiddle?

By adding

position:relative

to your container I was then able to specify individual positioning for the child elements, which then allowed me to center the text responsively. Please let me know if this wasn't what you were looking for.

.port_nav {
    background-color:rgba(255,255,255,0.3);
    width:80%;
    margin: 88px auto 0 auto;
    height:80%;
    position: relative;
}

And the individual images (added a span to make selection less problematic):

.port_nav .item .image {
    position: relative;
    width:30%;
    float:left;
    height:100%;
    background-color:rgba(255,255,255,0.3);
}

.port_nav .item .image span {
    position: absolute;
    width: 100%;
    text-align:center;
}
5
  • Alright then, give this a whirl: Fiddle. Vertically aligning text isn't as easy as using text-align - I've given the span a 100% height and then tucked it up a certain number of pixels, depending on the font-size used. I noticed that you have font-size set to 100% - my solution requires a set font size. For what it's worth! Oct 7, 2013 at 18:11
  • Hey. In the Fiddle, it seems right. Let me try this in my own markup of the whole. Thanks in advance! :) Oct 7, 2013 at 18:15
  • Well hell yeah! That's absolutely right. Could implement it perfectly. Thank you very much! :) Oct 7, 2013 at 18:24
  • Awesome! Glad it worked! I believe CSS 4 will fix the awfulness that is vertically-aligned text. Oct 7, 2013 at 18:35
  • Do you know by any chance a solution of this -> i.imgur.com/LnGSLU2.png -- When the width of the whole is smaller than the text inside, the text get split over 2 rows (of course). Any chance of having the text centered, even when in two rows? :) - That the images aren't showing that great.. There isn't much of a solution to that, except by using real media queries (as it's using background-cover:cover now) Oct 7, 2013 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.