CODEWITHSUNDEEP
htmlcss
baum
baum

Reputation: 1029

Vertically Aligning Caption with Image

I am trying to draw a caption to the right of an image.

Here is a jsfiddle of the below:

.captionDiv {
  margin-bottom: 10px;
}
.leftImage {
  display: inline;
  margin-right: 10px;
}
.caption {
  font-style: italic;
}
<div class="captionDiv">
  <img class="leftImage" src="http://lorempixel.com/300/200" title="Template Secondary Image">
  <span class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut.</span>
</div>

I am trying to get the caption text to both wrap to the right of the image and be vertically centered.

I tried using vertical-align: middle; but that doesn't effect text.

Where am I going wrong?

Upvotes: 0

Views: 2603

Answers (3)

H_alt
H_alt

Reputation: 153

Maybe this can be a possibility:

<div class="captionDiv">
<img class="leftImage" src="http://lorempixel.com/300/200" title="Template Secondary Image">
<span class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut.</span>
</div>

.captionDiv {
    position:relative;
    margin-bottom: 10px;
}
.leftImage {
    float:left;
}
.caption {
    display:block;
    padding-top:75px;
    font-style: italic;
}

Fiddle

Upvotes: 0

vishnu
vishnu

Reputation: 634

Add display:table property to .captionDiv and
add display:table-cell & vertical-align:middle to .caption div

Here is working Demo http://jsfiddle.net/nvishnu/v5rcy0f5/6/

Upvotes: 2

Michael Coleman
Michael Coleman

Reputation: 3398

This gets the result you are looking for:

<!-- language: lang-html -->
<div class="captionDiv">
    <img class="leftImage" src="http://lorempixel.com/300/200" title="Template Secondary     
    Image">
    <span class="caption">Lorem ipsum dolor sit more amet. Sed ut.</span>
</div>


.captionDiv {
    margin-bottom: 10px;
}
.leftImage {
    float: left;
    // display: inline;
    margin-right: 10px;
}
.caption {
    float: left;
    font-style: italic;
    padding-top: 100px;
}

Working fiddle

see this fiddle

Upvotes: 0

Related Questions