文本和图像在同一行

但它正在变成这样：

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; 
}

我在做什么错？

来源

2014-02-17 Abdullah Shafique

给出图像和文字的高度和宽度，并浮动所有文字和图像。 – GoE

首先，不要将图像放在“p”标签中。 –

你可以从你的段落删除float财产，并使用display: inline-block;（或inline），或者干脆使用内联的包装像<span>代替。

此外，为了垂直对齐的内联（嵌段）的元素，可以使用vertical-align: middle;如下：

img { 
    vertical-align: middle; } 

p { 
    display:inline-block; }

WORKING DEMO

对于水平定心内嵌元素，可以设置text-align: center;到亲本元件：

.parent { text-align: center; }

UPDATED DEMO。

来源

2014-02-17 16:52:35

这可以工作，但它会将文本和图像移动到左侧。我该如何居中呢？ –

@AbdullahShafique刚刚更新了答案。 –

它现在适用于除Safari之外的所有浏览器 –

文本和图像在同一行

回答

相关问题