CODEWITHSUNDEEP
htmlcss
andymoyle
andymoyle

Reputation: 438

Vertically align an image next to paragraph

I'm trying to get an image that is usually shorter in height than the adjacent paragraph to vertically align in the middle and just can't do it

<div class="element">
    <img  src="http://dummyimage.com/75" />
    <p  class="text" >Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>
    </p>

Here's my css so far 

.element{display:table;height:100%}
.text{display:table-cell;background:#CC0;padding:20px;}
.element img{display:table-cell;margin-right:10px;vertical-align:middle;}

And a jsfiddle http://jsfiddle.net/0krndsav/

Most other questions want the paragraph in the vertical middle of an image...

Any ideas?

Upvotes: 4

Views: 6868

Answers (5)

Anon
Anon

Reputation: 2874

Use display: inline-block; for vertical-align.

CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

HTML

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

DEMO

Upvotes: 9

Darshak Shekhda
Darshak Shekhda

Reputation: 646

try this 

.ca_event_detail {

  background: #CC0;

  width: 100px;

  display: inline-block;

  vertical-align: middle;

}

img {

  margin-right: 10px;

  vertical-align: middle;

}
<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <p class="ca_event_detail">Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>
  </p>
</div>

Upvotes: 0

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Working Fiddle

Simply use this;

img, p
{
    display: inline-block;
    vertical-align:middle;
}

Upvotes: 0

meriadec
meriadec

Reputation: 2983

Try this on your .element :

display: flex;
align-items: center;

Here is your jsFiddle, updated.

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can add a div container for your img and apply there table-cell and vertical-align: middle:

.church-admin-calendar-widget-item {
    display:table;
}
.ca_event_detail {
    display:table-cell;
    background:#CC0
}
img {   
    margin-right:10px;
}

#imgCont{
    display: table-cell;
    vertical-align: middle;
}
<div class="church-admin-calendar-widget-item">
    <div id="imgCont">
        <img width="75" height="60" src="http://dummyimage.com/75" />
    </div>
    <p class="ca_event_detail">Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>
    </p>
</div>

Upvotes: 0

Related Questions