Question

我尝试使用下面的代码，但标题出现在下一行。代码如下：

<div style="display:inline;">
<img src="abc.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block">Hello</h5></div>

预期输出!!

Answer 1

如下所示更改样式。将 float：left; 添加到 img和h5标记 以获得结果。

更新输出

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div style="display: inline-block;width: 100%;">
    <img src="https://smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif" style="float:left;" />
    <h5 style="text-align:center;">Hello</h5>
  </div>
</body>

</html>

Answer 2

./server/router.js

div {
  display: flex;
  align-items: center;
}
img {
  margin: 10px 10px 10px 10px;
  width: 97px;
  height: 50px;
  flex: 0 0;
}
h5 {
  padding: 0;
  margin: 0;
  flex: 1 0;
  text-align: center;
}
.div {
  position: relative;
  min-height: 70px;
}
.img {
  position: absolute;
  left: 0;
  top: 0;
}

Answer 3

在这里，我使用了内联样式。但总是尽量避免使用内联样式。

<div style="display: inline-block;width: 100%;text-align: center;">
  <img src="https://placeholdit.imgix.net/~text?txtsize=12&txt=97%C3%9750&w=97&h=50" alt="img" style="text-align: left;float: left;" />
  <h5 style="margin: 17px 0;">Hello</h5>
</div>

Answer 4

它在同一行

＆＃13;

<div style="display:inline;background:red; float: left;">
  <img src="http://image.flaticon.com/icons/png/128/33/33702.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;"><h5 style="display:inline-block; background:blue;color:#fff; vertical-align:top;">Hello</h5></div>

＆＃13;

Answer 5

使用vertical-align垂直对齐元素（对块元素不起作用）。

＆＃13;

div {
  display: inline
}
h5 {
  display: inline-block;
  vertical-align: middle;
}
img {
  margin: 10px;
  width: 97px;
  height: 50px;
  vertical-align: middle;
}

＆＃13;

<div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
  <h5>Hello</h5>
</div>

＆＃13;

Answer 6

我不明白你的问题是什么。试试吧..

<div style="display:inline;"> <img src="abc.png" style="float:left; margin:10px 10px 10px 10px;width:97px;height:50px;" /> <h5 style="display:inline-block;">Hello</h5></div>

HTML：如何对齐左侧的图像和中心的标题？

6 个答案: