CODEWITHSUNDEEP
csshtmljsfiddle
klefevre
klefevre

Reputation: 8735

How to center vertically a floating div inside an inline-block?

I'm trying to center vertically a div inside an inline-block, I used this inline-block to get automatically size of child in order to center my div.

The problem is my children div are floating... in order to constrain it to the left/right position.

Here is how the HTML look like : 

<span class="block_container">
    <div class="block_text"> <!-- float:right -->
        <h1>TITLE</h1>
        <p>lorem ipsum</p>
    </div>
    <div class="block_image"> <!-- float:left -->
        <img src="test.png"></img>
    </div>
</span>

However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/

Edit:
Here is what I want :
enter image description here

Here is what I tried : http://jsfiddle.net/kl94/nH2sd/

Upvotes: 2

Views: 4721

Answers (3)

Nitesh
Nitesh

Reputation: 15749

To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.

1. Adding a display:table-row; to the parent block.

2. Removing all floats and replacing it with display:table-cell;

This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.

Here is the WORKING DEMO

The HTML:

<span class="block_container">
        <div class="block_image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
    </div>
    <div class="block_text">
        <div class="bgColor">
        <h1>TITLE</h1>
        <p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
            <div>
    </div>
</span>

The CSS:

.block_text {
    /*background: red;*/
    /*float: right;*/
    width: 60%;
    display:table-cell;
    vertical-align:middle;
}

.block_image {
    background: yellow;
    /*float: left;*/
    width: 40%;
    display:table-cell;
}

.block_image img {
    width: 100%;
    max-width: 300px;
    height:auto;
}

.block_container {
    background:teal;
    /*display:inline-block;*/
    display:table-row;
}
.bgColor{background:red;}

Hope this helps.

Upvotes: 4

Gimmy
Gimmy

Reputation: 3911

You can try to add this:

margin-top: 13%; at your .block_text selector in CSS.

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.block_text {
    background: red;
    display:inline-block;
    vertical-align: middle;
}

img {
    width: 40%;
    max-width: 300px;
    vertical-align:middle;
    background: yellow;
}

.block_container {
    background:teal;
    display: inline-block;
}


</style>
</head>
<body>

<div class="block_container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
        <h1>TITLE</h1>
        <p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
    </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions