Question 184221 in Html Question posted in
Some basic documentation can be found here.

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

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:

enter image description here

With this markdown code:

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

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:

enter image description here

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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:

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

    This is how it looks: enter image description here

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


  2. 0

    You can put both components into a table:

    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>

    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.

    Login or Signup to reply.
  3. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search