Question

我正在努力实现这样的目标：

但事实证明是这样的：

enter image description here

这是我的HTML代码：

<!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>

这是我的CSS：

@charset "UTF-8";
/* CSS Document */
body
{
    background-color:#00A1B3;
}
img
{
    display:inline;
}
p
{
    display:inline-block;   
    float:left;
}

我做错了什么？

Answer 1

您可以从段落中删除float属性，并使用display: inline-block; （或inline），或者只使用内联包装，如{{1相反。

另外，要垂直对齐内联（-block）元素，可以使用<span>，如下所示：

vertical-align: middle;

<强> WORKING DEMO

对于内嵌元素的水平居中，您可以将img { vertical-align: middle; } p { display:inline-block; }设置为父元素：

text-align: center;

<强> UPDATED DEMO

文本和图像在同一行

1 个答案: