Text and Image in same line

Question

I am trying to achieve something like this: But it is turning out like this: This is my HTML code: ``` Test

Text

Text 2

Test 3

Test 4

``` And here is my CSS: ``` @charset "UTF-8"; /* CSS Document */ body { background-color:#00A1B3; } img { display:inline; } p { display:inline-block; float:left; } ``` What am I doing wrong?

Accepted Answer

You could remove the `float` property from the paragraphs, and use `display: inline-block;` (or `inline`), or simply use an inline wrapper like `<span>` instead.

Also, to align vertically the inline(-block) elements, you could use `vertical-align: middle;` as follows:

```
img {
    vertical-align: middle; }

p {
    display:inline-block; }
```

WORKING DEMO

For horizontal centering the inline elements, you could set the `text-align: center;` to the parent element:

```
.parent { text-align: center; }
```

UPDATED DEMO.

Text and Image in same line

Solution

Problem