CODEWITHSUNDEEP
htmlcssvertical-alignment
J. M. Habibi
J. M. Habibi

Reputation: 131

vertically align p tag next to image

I have a p tag i would like vertically aligned next to an image. The problem I am having is that only the first line of text is vertically aligned. How do i get the text in the p tag to wrap next to the image and maintain vertical alignment?

HTML

<body>
  <div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>
</body>

CSS

<style>
.blog img {
  vertical-align: middle;
}

.blog p {
  display: inline;
}
</style>

Upvotes: 2

Views: 5750

Answers (4)

Omer Faruk Dasar
Omer Faruk Dasar

Reputation: 150

You can also use grid system though it may detour.

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
} 

img { grid-area: 1 / 1 / 2 / 2; }
p { grid-area: 1 / 2 / 2 / 3; }

in my case, it automatically aligned vertically.

For mor information. You can visit CSS Tricks.

Upvotes: 2

Manngo
Manngo

Reputation: 16311

If I understand the requirement, you want the whole paragraph adjacent to your image?

The simplest solution is to use CSS table properties. Note that this does not mean to use tables. Rather it simply displays elements as such.

Here is some sample CSS

div.blog {
    display: table;
}
div.blog>img {
    display: table-cell;
}
div.blog>p {
    display: table-cell;
}

The display:table in the first property is not strictly necessarily, but the default would be display:table-row, which gives you less control over sizing.

Upvotes: 0

BEngleman
BEngleman

Reputation: 9

CSS code shoulde be:

.blog img {
    vertical-align: middle;
    float:left;
    width:50px;
    height:50px;
    margin-right: 15px;
}

.blog p {
    display: inline;
}

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53684

display: flex; on the parent and align-items: center to center the contents vertically.

.post {
  display: flex;
  align-items: center;
}
<div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>

Upvotes: 7

Related Questions