Reputation: 6918
I am trying to achieve something like this:
But it is turning out like this:
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
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; }
For horizontal centering the inline elements, you could set the text-align: center;
to the parent element:
.parent { text-align: center; }
Upvotes: 8