CODEWITHSUNDEEP
htmlcss
user2013488
user2013488

Reputation: 363

vertical multiline text and image lineup

So I need to align a image and a text so that the text is right in the middle of the image, like this:

enter image description here

Here's my code, but the text stays on the top side: 

<div class="container">

 <img src="#" alt="#" /> 

<div class="text">

 headline and text below it

</div> 
</div> 

.container {width: 600px; margin: 0 auto; clear: both;} 
.container img {float: left;} 
.container .text {float: right; vertical-align: middle;}

Upvotes: 0

Views: 160

Answers (6)

4dgaurav
4dgaurav

Reputation: 11496

Demo

According to the HTML spec, <span> is an inline element and <div> is a block element. Now that can be changed using the display CSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so:

<span>...<div>foo</div>...</span>

is not strictly valid even if you change the <div> to inline or inline-block.

So, if your element is inline or inline-block use a <span>. If it's a block level element, use a <div>.

HTML

<div class="container"> 
    <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
 <span id="text">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
      </div>
   </span>
</div>

CSS

.container {
    text-align: center;
    width: 600px;
    margin:auto;
    border: 1px solid black;
}
.container span {
    display: inline-block;
    vertical-align: middle;
}
.container #text {
    border: 1px solid red;
    /* to show the centering */
}
.cv {
    display: table;
    margin: 0 auto;
    text-align: left;
}
.photo {
    border: 1px solid green;
    /* to show the centering */
}

Upvotes: 1

Imran Bughio
Imran Bughio

Reputation: 4941

DEMO

Use the same old table technique.

HTML:

<div class="container">
    <div class="img">
        <img src="http://placehold.it/250x250" alt="#" />
    </div>
    <div class="text">headline and text below it</div>
</div>

CSS:

.container {
    display:table-row;
}
.img, .text {
    display:table-cell;
}
.text {
    vertical-align: middle;
}
.img {
    padding-right: 10px;
}

Upvotes: 1

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Here is the Demo of your requirement

you have to change image and content according to your requirements

<div class="container">
    <img src="http://google.com/images/srpr/logo11w.png" alt="#" class="myimg" /> 
   <div class="cont">
    <h1 class="heading">HEADLINE</h1>
<p class="text">

 Some content Some content Some content Some content Some content Some content Some content Some content Some content 

</div> 
    </div>
</div>

CSS .myimg{ width:200px; margin:10px }

.text{
    text-align:justify;
}
.cont{
    display:inline-block;
    width:300px
}

Upvotes: 1

James
James

Reputation: 4580

You can try with a table structure to get this. Check this

DEMO

HTML

<div class="wrapper">
<div class="container">
    <img src="http://lorempixel.com/200/200" alt="#" /> 
    <div class="text">
        <h1>Heading 1</h1>
     headline and text below it
    </div> 
</div> 
</div>

CSS

.wrapper{
    width:600px;
    display:table;
}
.container {
    width: 600px; 
    margin: 0 auto; 
    clear: both;
    display:table-row;
} 
.container img {
    display:table-cell;
    padding-right:10px;
} 
.container .text {
    display:table-cell; 
    vertical-align: middle;
    width:60%;
}

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try like below

<div class="container">
  <div class="img">
    <img src="#" alt="#" /> 
  </div>
  <div class="text">
    headline and text below it
   </div> 
</div> 
<div class="clear"></div>

.clear {clear: both}
.container {width: 600px; margin: 0 auto;} 
.img {float: left;} 
.container .text {float: left; vertical-align: middle;}

Upvotes: 1

Dev&#39;Hamz
Dev&#39;Hamz

Reputation: 488

You need to change the CSS of .container .text float: left instead of float: right like that :

.container img {float: left; width: 300px; height: 300px} 
.container .text {float: left; vertical-align: middle;margin-left:15px}

Upvotes: 1

Related Questions