CODEWITHSUNDEEP
htmlcssimagetext
Abdullah Shafique
Abdullah Shafique

Reputation: 6918

Text and Image in same line

I am trying to achieve something like this:

But it is turning out like this:

enter image description here

This is my HTML code:

<!doctype html>
<html>
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<p>Text</p>
<p>Text 2</p>
<p align="center">
<img src="Images/image" width="150" height="150" alt="Image"/>
</p>
<p>Test 3</p>
<p>Test 4</p>
</body>
</html>

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?

Upvotes: 2

Views: 14359

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99564

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.

Upvotes: 8

Related Questions