在Markdown中将两个HTML元素居中对齐并并排显示。

huangapple go评论72阅读模式
英文:

Align two HTML elements in the center and display side-by-side in markdown

问题

你可以尝试使用以下Markdown代码,将两个元素垂直居中并显示在页面的中间:

<details>
    <summary>Hello, friend</summary>
    <p align="center">
        <img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c" alt="lol-haha" style="height:3.8cm; vertical-align: middle;">
        <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>

这将使两个元素垂直居中,并且不会创建下拉菜单。请尝试并查看效果。

英文:

I am using github flavored markdown to format my github profile and I wanted to show an image alongside the profile views.

This is what I achieved so far:

在Markdown中将两个HTML元素居中对齐并并排显示。

With this markdown code:

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

This code also adds a dropdown menu to see the images, I actually do not need that.

What I want is the profile view counter to be in the middle of the height of the image, still on its right side, so it is positioned with more height.

I should see it like this:

在Markdown中将两个HTML元素居中对齐并并排显示。

Can someone please help me? I am completely new with HTML and markdown and I did not know that aligning two elements was going to be so difficult. Bless front-end programmers.

Also note that the two elements must be displayed in the center of the page.

Do not use CSS to format the elements, add the styles in line since in markdown there is no support for explicit CSS. Also please test your solution since I have been using other solutions but they do not work with github flavored markdown:

Thank you very much.

EDIT: I finally was able to use a table with inline CSS styles as asked for solving my question.

Take a look here to see the final result.

答案1

得分: 1

你可以将这两个组件放到一个表格中:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
td {
    vertical-align:center
}

<!-- language: lang-html -->
<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&amp;label=Profile%20views&amp;color=0e75b6&amp;style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;">
        </td>
    </tr>
</table>

<!-- end snippet -->

Edit 1: 我之前使用了表格,但根据 @Sdili_81 的建议,这不是推荐的做法。

Edit 2: 鉴于在这个特定用例中这个解决方案不起作用,我已恢复到原始答案。

英文:

You can put both components into a table:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

td {
vertical-align:center
}

<!-- language: lang-html -->

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

<!-- end snippet -->

Edit 1: I previously used a table but that's not recommended according to @Sdili_81

Edit 2: Reverted back to the original answer as this solution did not work in this particular use case.

答案2

得分: 1

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-css -->
.bro-code{
    display:flex;
    align-items:center;
}

<!-- 语言: lang-html -->
<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&amp;label=Profile%20views&amp;color=0e75b6&amp;style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;"> 
</p>

<!-- 结束代码片段 -->
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

答案3

得分: 0

没有提供解决我的问题的答案。幸运的是,我在这里找到了一个解决方案。我认为我已经使用了表格布局。我的解决方案代码仅使用内联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>

这是它的外观:
在Markdown中将两个HTML元素居中对齐并并排显示。

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

英文:

No answers are provided for this question that solve my problem. Luckily, I have found a solution in here. I think I have used the table layout. My solution code using only inline CSS styles is:

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

This is how it looks:
在Markdown中将两个HTML元素居中对齐并并排显示。

I hope this helps someone. I will mark this question as solved.

huangapple
  • 本文由 发表于 2023年6月8日 19:41:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76431505.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定