CODEWITHSUNDEEP
htmlcss
user1643248
user1643248

Reputation: 27

vertically aligning a div within a parent

I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?

Thanks

http://jsfiddle.net/mpBW5/5/

Upvotes: 0

Views: 129

Answers (4)

Bram Vanroy
Bram Vanroy

Reputation: 28437

The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:

$("div.person-user").each(function() {
    $(this).css("marginTop", function() {
        var imgH = $(this).prev("div.person-user-pic").height(),
        thisH = $(this).height(),
        h = (imgH/2) - (thisH/2);
    return h;
    });
});​

BUT: if every div and image has the same height, you could just do this:

div.person-user {margin-top: 8px;}

I hope that this answers your question?

Upvotes: 0

Armen Michaeli
Armen Michaeli

Reputation: 9140

What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.

Markup:

<div class="person">
    <img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
    <div class="profile">
        <div class="name">Colin Pacelli</div>
        <div class="fact">Ohio University</div>
    </div>
</div>​​​​​​​

Style:

.person {
    display: table;
}

.person img.profile{
    height: 50px;
    margin-right: 10px;
    /*border-radius: 4px 4px 4px 4px;*/
}

.person div.profile {
    display: table-cell;
    vertical-align: middle;
    /*font-family: calibri;
    font-size: 14px;
    color: #444;*/
}

/*.person .profile .name {
    font-weight: bold;
}*/

I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.

As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.

Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.

Upvotes: 1

MassivePenguin
MassivePenguin

Reputation: 3711

This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:

http://jsfiddle.net/2yfDs/1/

Upvotes: 1

castillo.io
castillo.io

Reputation: 942

This is a very common question and the best explanation so far is here:

http://phrogz.net/css/vertical-align/index.html

Upvotes: 0

Related Questions