0

当您按下按钮时，我在创建的表格中插入了一张图片，它显示了表格，但我希望实际网站上的文本中的图片略低，我该怎么做？

代码：

     <div id="demo" style="display:none"><font color="white"><b>Fav Color:</b> Orange/Purple<br><b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting<br><b>Fav Song:</b> Homocide - Logic (ft. Eminem)<br><b>Fav Animal:</b> Cat<br><b>Fav Food:</b> Pulled Pork Sandwich<br><b>My Fav Game:</b> Fortnite <img src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px"></font></div>

在此处输入图像描述

如果你知道我的意思，我希望 F 标志稍微低一点，更符合 Fortnite 这个词

4

5 回答 5

3

我建议应用于vertical-align: middle;图像。

body {
  background: #000;
}
<div id="demo">
  <font color="white">
    <b>Fav Color:</b> Orange/Purple<br>
    <b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting<br>
    <b>Fav Song:</b> Homocide - Logic (ft. Eminem)<br>
    <b>Fav Animal:</b> Cat<br>
    <b>Fav Food:</b> Pulled Pork Sandwich<br>
    <b>My Fav Game:</b> Fortnite
    <img src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px" style='vertical-align: middle;'>
  </font>
</div>

还有一些与您的问题无关但会改进代码的一般要点：

  • 通常在现代 HTML 中避免使用fontand标签，使用带有s 的标签来表示粗体文本会更好。bpspan
  • 最好避免内联应用样式，理想情况下，您会给元素类并使用样式表来应用样式
于 2021-01-21T16:10:50.190 回答
2

首先，您不应该再使用该<font>标签，因为它不再是 HTML5 的一部分，即使当前的浏览器可能支持它。

您应该改用段落<p>并在样式属性中声明您的字体样式。看这里的例子。https://www.w3schools.com/tags/tag_font.asp

如果您将代码更改为段落，它可能看起来像这样：

<div id="demo" style="text-align: center; color: white;">
    <p>Fav Color:</p>
    <p>Hobbies:</p>
    <p>Fav Song:</p>
    <p>Fav Animal:</p>
    <p>Fav Food:</p>
    <p>My Fav Game: Fortnite <img style="position: relative; top: 5px;" src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px"></p>
</div>

您正在寻找使图像降低一点的特定代码：

<img style="position: relative; top: 5px;" ... />

如果要根据文本将其居中，则可以执行以下操作： <img style="position: relative; top: 50%; transform: translateY(-50%)" ... />

top: 50%将让图像从文本的垂直中心开始。虽然transform: translateY(-50%)会将其向上拉回图像高度的一半。

于 2021-01-21T16:16:03.973 回答
1

在顶部添加边距。

margin-top: 10px;

于 2021-01-21T16:06:49.327 回答
0

负边距会降低它。给它

margin-bottom: -8px;

或者。

于 2021-01-21T16:02:31.027 回答
0

我重做了一些代码，使其更具可读性。我消除了br标签并插入了p标签。我对齐图像的方法是在 Fortnite 文本和 Fortnite 图像周围插入一个 flex-container div 。然后，通过使用内联样式（不推荐，最好制作一个 CSS 样式表并将其连接到您的 HTML 文件），我将 display 应用于“flex”，并将项目与“center”对齐。这基本上垂直对齐div内的所有内容。

<body>
  <div id="demo">
    <p><b>Fav Color:</b> Orange/Purple</p>
    <p><b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting</p>
    <p><b>Fav Song:</b> Homocide - Logic (ft. Eminem)</p>
    <p><b>Fav Animal:</b> Cat</p>
    <p><b>Fav Food:</b> Pulled Pork Sandwich</p>
    <div class="flex-container" style="display: flex; align-items: center;">
      <p><b>My Fav Game:</b> Fortnite</p>
      <img src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px" style="padding-left: 10px">
    </div>
  </div>
</body>
于 2021-01-21T16:14:01.647 回答