CODEWITHSUNDEEP
htmlcss
chacham15
chacham15

Reputation: 14251

How do I make an inline-block stretch?

I want the image to be left aligned but the text-block to be center aligned in the remaining space. How do I do that?

Html:

<ul>
    <li>
        <img src="http://mobile-streetmaps.com/wp-content/uploads/2010/01/itunesArtwork-1-08-18-08.gif" />
        <center>
            <div>
                <h1>Hello</h1>
                <p>I R Awesome</p>
            </div>
        </center>
    </li>
</ul>

css: 

img {
    vertical-align:middle;
    display:inline-block;
}
center {
    vertical-align:middle;
    display:inline-block;
    background-color:orange;
}

jsFiddle: http://jsfiddle.net/PVgT6/

Upvotes: 0

Views: 3807

Answers (2)

Teodor
Teodor

Reputation: 3454

As mentioned in Willem Van Bockstal answer to a similar problem, you could use table-like behaviour in CSS.

First Give the list element a class and then make it a table in the css.

<li class="imgtext">

.imgtext {
    display: table;
 }

Then you make the center display: table-cell.

center {
    vertical-align:middle;
    display: table-cell;
    width: 100%;
    background-color:orange;
}

fiddle

Upvotes: 1

Brigand
Brigand

Reputation: 86250

Here's a percentage based solution.

fiddle

First, we give our lists a class to tell them how to handle their contents.

<li class="list-image">...</li>

Then we give our image a width, and make it play nice with the div:

li.list-image img {
    width: 20%;
    vertical-align:middle;
    display:inline-block;
}

Our div needs to have 100% - (image-width * 2) for its width. This allows it to be centered in the ul. If you just want it centered in the div, (which will be slightly to the right side), you can do 100% - image-width, e.g., 80%.

li.list-image > div {
    width: 60%;
    height: 100%;
    vertical-align:middle;
    text-align: center;
    display: inline-block;
}

Upvotes: 0

Related Questions