图像和Div-并排

Question

I would like to create a set up where there is an image on the left and and div on the right. I am using float left to accomplish this but I would like the right div to have the same height as the image on the left and for the text to be centered vertically.

here is a jsfiddle

<img class="half" src="http://placekitten.com/200/300">
<section class="articlename">Gangstas Drinkin</section>  

...

.half{float:left;width:50%;}
.articlename{width:50%;background-color:black;float:left;color:white;}

So to recap i want the cat to be 50% of the page and the other 50% to be black with the text and the right side needs to match the height of the image.

Is this possible?

Answer 1

http://jsfiddle.net/Dyt2X/23/
http://fiddle.jshell.net/Dyt2X/23/show/
Note: remove the white space between the tags to avoid inline-block elements to add unwanted space.

.wrap {
    display:inline-block;
    background-color:#000;
}
.half,
.articlename {
    display:inline-block;
    width:50%;
    vertical-align:middle;
}
.articlename {
    color:#fff;
    text-align: center;
}

Answer 2

You could do something like this: http://codepen.io/the_ruther4d/pen/695e1228a4efa13ee3e5551687c66247/

Using relative positioning on a wrapper element we can use the absolute position method of vertically centering the articlename.

Answer 3

Make the child div inline or inline-block

A simple example is below:

html:

<div >
  <img src="myimg.png" />
  <div class="child-div1">My div content</div>
</div>

css:

.child-div1 {
    display: inline-block;
}

Hope that helps.