文本和图像在同一行 [英] Text and Image in same line
本文介绍了文本和图像在同一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图达到这样的效果：
但它是这样的结果：
这是我的HTML代码：
code><！doctype html>
< html>
< head>
< title>测试< /标题>
< link href =style.css =stylesheettype =text / css>
< / head>
< body>
< p>文字< / p>
< p>文字2< / p>
< p align =center>
< img src =图片/图片width =150height =150alt =图片/>
< / p>
< p>测试3< / p>
< p> Test 4< / p>
< / body>
< / html>
以下是我的CSS：
@charsetUTF-8;
/ * CSS文档* /
正文
{
背景颜色：＃00A1B3;
}
img
{
display：inline;
}
p
{
display：inline-block;
float：left;
}
我做错了什么？
display：inline-块; （或 inline ），或者简单地使用内联包装器，如< span> ; 改为 另外，要垂直对齐内联（-block）元素，可以使用 vertical-align ：middle; 如下：
img {
vertical-align：middle; }
p {
display：inline-block; }
为了横向集中内联元素，可以设置 text-align：center; 添加到父元素：
。 parent {text-align：center; }
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?
解决方案
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; }
这篇关于文本和图像在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
