Search code examples
htmlcssimagedisplaytext-align

Text is not being placed besides image


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

  • div tag gets float:left - places text below image
  • replacing div with span - wraps text around image
  • replacing div with span and adding display:inline-block; to spans - places text below image
  • removing div tag around image and text - wraps text around image
  • float:left; on only div with image - wraps text around image
  • float:left; on div with image and float:right; on div with text - places text below image
  • adding display: inline-block; to img tag - places text below image

Note 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.


Solution

  • You could use display: table-cell on divs inside cc-testimonial-quote DEMO

    .cc-testimonial-quote > div {
      display: table-cell;
    }