html - 如何对齐左边的图像和中间的标题?

标签 html css

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

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

Incorrect result 预期输出!! enter image description here

最佳答案

像下面这样改变你的风格。将 float:left; 添加到 img 和 h5 标签 以获得结果。

更新的输出

enter image description here

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

关于html - 如何对齐左边的图像和中间的标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39161005/

相关文章:

html - 使用&符号来定位父选择器

html - 基线垂直对齐,但在顶部

javascript - 基于 Controller 返回值的 Ng 类

html - 将固定宽度 div 中的文本与图像对齐

javascript - 如何将 CSS 应用于输入标签值

html - 将 .field-item 图像 float 到内容类型的左侧而不是在 Drupal 中将其居中

CSS 菜单在 IE 8 及更低版本中不起作用

javascript - 在 HTML 文件的 &lt;script&gt; 标签内运行 python 代码

javascript - 使用 jQuery 动态插入图像

css - 坚持使用砌体的响应式和时间轴设计