I want to align an image beside a text. But for some reason, all I trye makes the text either wrap around the image or be placed below it. This is my current code:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
img {
height: 16px;
margin-right: 20px;
}
div {
display: inline-block;
height: 100%;
}
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
At the moment, the text is place below the image. I have also tried
float:left
- places text below imagedisplay:inline-block;
to spans - places text below imagefloat:left;
on only div with image - wraps text around imagefloat:left;
on div with image and float:right;
on div with text - places text below imagedisplay: inline-block;
to img tag - places text below imageNote that the container
, box
and row
classes comes from Bootstrap. Can that affect it somehow?
Searching has not found me a solution other than the ones I've tried before, but I might have overlooked some solution posted here before.
You could use display: table-cell
on divs inside cc-testimonial-quote
DEMO
.cc-testimonial-quote > div {
display: table-cell;
}