Question

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.

Was it helpful?

Solution

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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top