How to Align text with respect to image css


Tags: html,css,css3

Problem :

I want to align text to be with respect to image, the text is breaking and the rest of text is coming under image.

This is what i tried:

Demo

HTML:

<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>

CSS:

div.left{
  vertical-align: middle;
   display: inline-block;
}
div.right{
  vertical-align: middle;
  display: inline;
}


Solution :

In case you need to use div.

div.left {
  vertical-align: middle;
  display: table-cell;
  padding-right: 10px;
}
div.right {
  vertical-align: middle;
  display: table-cell;
}
<section>
  <div class="left">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="">
  </div>
  <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo </span>
  </div>
</section>


    CSS Howto..

    How to translate this Silverlight control into HTML/CSS/JS

    How to move the right div to the right with css

    How to set the text absolutely (CSS) in the middle of a div despite a changing width div behind him?

    Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

    How do I get this HTML canvas animation to appear on top of my image?

    How to slide a div from bottom using pure css or pure javascript

    How do I customize an asp:Button class?

    How to change the width of displayed text nested in a div?

    How can I display just a portion of an image in HTML/CSS?

    How to compile CSS into SCSS

    How can I add a whitespace in between my element and psuedo element?

    How to print data from left to right in html using css

    How to set a td floating left in chrome?

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    How to make emails responsive?

    how to make DIV show up on top of other Divs

    How do I make my div with six different pictures expand outwards when clicking it?

    SceneBuilder (by gluon) doesn't show imported fonts

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    How to go about making an image move up in the div on hover

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How to have different table styles in CSS

    How to set up navigation with fading (sprite) background image

    How to make a floated element take the entire width of its parent

    How to wrap image around the long text?

    How can I make buttons flash different background colors when clicked/

    How to add hover class to jQuery click(function() accordian divs?

    How to Properly Add CSS in a MailMessage

    How to achieve a fancy outline around an image in CSS

    How to Position an Image underneath a form in CSS