CODEWITHSUNDEEP
htmlcssresponsive-design
user3145782
user3145782

Reputation: 57

Aligning issue for web design html/css. fiddle included.

I am attempting to design a responsive layout in which there is an image and a paragraph side by side and the image is vertically aligned with the text (the paragraph height changes with adjustments to the browser width).

Here is my currant code, http://jsfiddle.net/xSrpt/

I have tried using 

    vertical-align:middle;

and 

    vertical-align:central;

on the parent div (#intro) and have not been able to get anywhere with it. I feel like this should be an easy fix and i am missing something but hopefully you guys can help.

please include a working fiddle with your answer.

Thanks a lot!

Upvotes: 0

Views: 75

Answers (2)

dtjokro
dtjokro

Reputation: 122

Just to add a comment to above answer ( rep too low ). It is unnecessary to convert the div into table.

All you have to do is applying vertical-align:middle to child element and not the parent.

#intro > * { vertical-align:middle }

Here's your forked fiddle. http://jsfiddle.net/UBD6S/

much simpler solution.

Upvotes: 1

Jentel
Jentel

Reputation: 154

try add to its parent - display:table-cell;

edit:

you need to make the div "act" like a table, as below:

CSS:
#intro{
   display:table; /** table **/
    width:90%;
    background-color: #999;
    padding:5%;
}
#pic{
    height:100%;
    width:80px;
    background:black;
    display:table-cell; /** table-cell **/
    vertical-align:middle;
}
#your_pic {
    width:80px;
    height:80px;
    background:#fff;
}
#p{
    display:inline-block;
    width:80%;
}

HTML:
<div id="intro">
    <div id="pic"><div id="your_pic"></div></div>
<p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>

Upvotes: 1

Related Questions