css 如何将图片靠左对齐，标题居中对齐？

vc9ivgsu 于 2023-02-17 发布在其他

关注(0)|答案(6)|浏览(257)

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

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

x1c 0d1x预期输出！！

css

来源：https://stackoverflow.com/questions/39161005/how-to-align-an-image-at-left-and-a-heading-in-centre

6条答案

按热度按时间

atmip9wb1#

改变你的风格如下。添加***浮动：左;***到***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>

赞(0）回复(0）举报 2023-02-17

yc0p9oo02#

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

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

赞(0）回复(0）举报 2023-02-17

ej83mcc03#

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

<h4>Center of text part</h4>
<div>
  <img src="http://beerhold.it/97/50">
  <h5>Hello</h5>
</div>
<hr>
<h4>Center of vieport</h4>
<div class="div">
  <img class="img" src="http://beerhold.it/97/50">
  <h5>Hello</h5>
</div>

赞(0）回复(0）举报 2023-02-17

cdmah0mi4#

在同一条线上

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

赞(0）回复(0）举报 2023-02-17

sg3maiej5#

使用vertical-align可垂直对齐图元（不适用于块图元）。

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

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

赞(0）回复(0）举报 2023-02-17

n1bvdmb66#

我不明白你有什么问题。试试这个...
<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>

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何将图片靠左对齐，标题居中对齐？

6条答案

相关问题

热门标签

最新问答