CODEWITHSUNDEEP
htmlcssvertical-alignment
Christina
Christina

Reputation: 73

vertical align a div next to another div

I need to vertically align a div that has text that is next to a div that contains an image.

photo of visual

The content can have multiple lines in the title (if you see image).

Currently how the html is:

<div class="small-view">
    <div class="small-left">
       <img src="image.png" width="80">
    </div>
    <div class="small-right">
       <p class="post-title">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

I'd like to vertically align "small-right" to the image so it's centered based on the text within it. For some reason, everything I'm trying isn't working.

Upvotes: 0

Views: 4319

Answers (5)

user4431269
user4431269

Reputation: 

.small-view div {
  display: inline-block;
  vertical-align: middle;
  border: 1px pink solid;
}
.small-right {
  width: 250px;
}
<div class="small-view">
  <div class="small-left">
    <img src="image.png" style=" width: 80px;" />
  </div>
  <div class="small-right">
    <p class="post-title">This is a post <span class="post-info">January 5, 2015</span>
    </p>

  </div>
</div>

Here you go: much bether now :)

What i did: i put the in the

, change 80 > 80px changed some wrong "

Upvotes: 2

Veve
Veve

Reputation: 6748

Make all your blocks (divs & p) displaying inline, and apply the vertical-align to your image:

<div class="small-view">
    <div class="small-left" style="display:inline;">
       <img src="image.png" width="80" style="vertical-align:middle">
    </div>
    <div class="small-right" style="display:inline;">
       <p class="post-title" style="display:inline;">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen

You can also use a single div:

<div class="small-view">
    <div class="small-left-and-right">
       <p class="post-title">
          <img src="image.png" width="80" style="vertical-align:middle">
          This is a post
       </p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen

Upvotes: 0

cli
cli

Reputation: 160

Add this CSS float:left; to .small-right

Like this: .small-left {float:left;}

Here is a fiddle: http://jsfiddle.net/hmyLz28j/

Upvotes: 0

Martijn van der Jagt
Martijn van der Jagt

Reputation: 524

<div> is a block level item, meaning that by default it will start a new line after closing the </div>. This can by overriden by the style <div style='display:inline'>, bet better is to use <span> which is an inline item

Upvotes: 0

user1627167
user1627167

Reputation: 339

you can try with table. In one column the image and in other col text

Upvotes: 0

Related Questions