css 将两个HTML元素居中对齐，并在markdown中并排显示

fdx2calv 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(177)

我正在使用github风格的markdown来格式化我的github个人资料，我想在个人资料视图旁边显示一张图片。
这就是我目前为止所取得的成就：

使用此Markdown代码：

<details>
    <summary>Hello, friend</summary>
    <p>
      <img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c" alt="lol-haha" style="height:3.8cm;">
      <img src="https://komarev.com/ghpvc/?username=aleixmt&label=Profile%20views&color=0e75b6&style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;"> 
    </p>
</details>

这段代码还添加了一个下拉菜单来查看图像，我其实不需要。
我想要的是剖面图计数器位于图像高度的中间，仍然在其右侧，因此它的位置具有更高的高度。
我应该这样看：

有人能帮帮我吗？我对HTML和Markdown完全陌生，我不知道对齐两个元素会如此困难。祝福前端程序员。
另外请注意，这两个元素必须显示在页面的中心。
不要使用CSS来格式化元素，在行中添加样式，因为在markdown中不支持显式CSS。另外，请测试您的解决方案，因为我一直在使用其他解决方案，但它们不适用于github风格的markdown：

CSS - center two images in css side by side
Markdown and image alignment
Divs side by side and centered
is there a way to align two HTML elements side by side without CSS? How?（我的代码与此类似）
vertical middle aligned image and text side-by-side in CSS（这看起来不错，但不起作用。）

非常感谢。
编辑：我终于能够使用一个带有内嵌CSS样式的表格来解决我的问题。
看看here，看看最终的结果。

css

来源：https://stackoverflow.com/questions/76431505/align-two-html-elements-in-the-center-and-display-side-by-side-in-markdown

3条答案

按热度按时间

sf6xfgos1#

.bro-code{
    display:flex;
    align-items:center;
}

<p class="bro-code">
      <img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c" alt="lol-haha" style="height:3.8cm;">
      <img src="https://komarev.com/ghpvc/?username=aleixmt&label=Profile%20views&color=0e75b6&style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;"> 
    </p>

赞(0）回复(0）举报 2023-06-25

0pizxfdo2#

您可以将这两个组件放入表中：

td {
vertical-align:center
}

<table>
    <tr>
        <td>
            <img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c" alt="lol-haha" style="height:3.8cm;">
        </td>
        <td>
            <img src="https://komarev.com/ghpvc/?username=aleixmt&label=Profile%20views&color=0e75b6&style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;">
        </td>
    </tr>
</table>

编辑1：我以前使用过一个表，但根据@Sdili_81不建议这样做
编辑2：恢复到原始答案，因为该解决方案在此特定用例中不起作用。

赞(0）回复(0）举报 2023-06-25

h79rfbju3#

这个问题没有提供解决我问题的答案。幸运的是，I have found a solution in here。我想我已经使用了table布局。我只使用内联CSS样式的解决方案代码是：

<!-- Eliot Alderson + profile visits counter -->
<div id="image-table" align="center">
    <table>
        <tr>
            <td style="padding:10px">
                <img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c"/>
            </td>
            <td style="padding:10px">
                <img src="https://komarev.com/ghpvc/?username=aleixmt&label=Profile%20views&color=0e75b6&style=flat"/>
            </td>
        </tr>
    </table>
</div>

它看起来是这样的：

我希望这对某人有帮助。我将把这个问题标记为已解决。

赞(0）回复(0）举报 2023-06-25

我来回答

css 将两个HTML元素居中对齐，并在markdown中并排显示

3条答案

相关问题

热门标签

最新问答