CODEWITHSUNDEEP
htmlcss
user4217999
user4217999

Reputation:

How to Align text with respect to image css

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;
}

Upvotes: 0

Views: 229

Answers (5)

Gautam Jha
Gautam Jha

Reputation: 1473

div.left{
   float: left;
}
<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
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 
</section>

fiddle here

just use float left will solve the problem

div.left{
   float: left;
}

Upvotes: 0

ketan
ketan

Reputation: 19341

Use display:flex to section. And align-items: center; if you want to make text center.

section {
    align-items: center;
    display: flex;
}
<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>

Upvotes: 0

xaid
xaid

Reputation: 726

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>

Upvotes: 0

DDan
DDan

Reputation: 8276

One good way would be to arrange it in a table. I think it's neater and easier to organize.

div.left {
  vertical-align: middle;
  display: inline-block;
}
div.right {
  vertical-align: middle;
  display: inline;
}
<section>
  <table>
    <tr>
      <td>
        <div class="left">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="">
        </div>
      </td>
      <td>
        <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>
      </td>
    </tr>
  </table>
</section>

See Fiddle

Upvotes: 0

Kapil
Kapil

Reputation: 1141

Please try to this code

div.left{
  vertical-align: middle;
   display: inline-block;
   float:left;
}
div.right{
  vertical-align: middle;
  display: inline;
}
<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>

Upvotes: 1

Related Questions