Member Avatar for Clueless2012

Help, please!!!
I've been searching here and elsewhere for a solution to my problem for hours, and tried many different things, but nothing works:

I'm trying to put two images next to each other, centered in the middle.
However, the images always show up aligned left, and on top of each other.
What am I doing wrong?

I've got this:
<div style="text-align: center"><a href="http://www.wppi.com" target="_blank"><img alt="WPPI" src="/images/WPPI_blk_100.jpg"/></a><a href="http://www.napcp.com" target="_blank"><img alt="NAPCP" src="/images/napcp_newlogo70.png"/></a></div>

My html knowlege is VERY limited, so whenever I try to do something, I basically have to look up everything in forums etc. ...

Thanks in advance for your help!!!

Edited by Clueless2012
  • 2 Contributors
  • 5 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As pointed out, the site template is the most likely culprit: many Markdown themes wrap inline HTML in block-level elements (for example a generated <p>) or apply global rules that make images or links behave as blocks. When anchors or images are forced to be block-level they stack vertically. Inline styles can override theme CSS, but some Markdown processors strip inline attributes, so a small class-based stylesheet rule is the most robust fix.

<section class="logo-row">
  <figure class="logo"><a href="#"><img src="/images/WPPI_blk_100.jpg" alt="WPPI"></a></figure>
  <figure class="logo"><a href="#"><img src="/images/napcp_newlogo70.png" alt="NAPCP"></a></figure>
</section>
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; /* keeps logos tidy on narrow screens */
}
.logo-row img {
  display: block;
  max-height: 80px;
  height: auto;
}

Quick troubleshooting checklist: inspect the computed styles in browser dev tools to see whether img or a have display:block, width:100%, float, or clear rules; check the rendered HTML for auto-wrapped <p> tags from the Markdown parser; and confirm where site CSS can be added (theme custom CSS area or a stylesheet). If adding a class is not possible, an inline-block fallback with font-size:0 on the wrapper can remove whitespace gaps — but flexbox is simpler and responsive across modern browsers.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

If the width of the pictures is less than the width of the div and you dont have any other styles in place for your images such as "display:block", then they should line up next to each other.

Member Avatar for Clueless2012

Well, unfortunately they don't...

Do I need to define the width and the height of the div in the code?

Member Avatar for JorgeM

If you simply copy the code you provided and paste it into a new HTML doc, the images line up side by side. There must be something else in your code causing this. Can you provide more revelant code, or simply provide a link to your page so that the source code can be seen?

Your code outputs two images side by side.

<div style="text-align: center">
  <a href="#"><img src="#"/></a><a href="#"><img src="#"/></a>
</div>
Member Avatar for Clueless2012

I have a website template that uses markdown for customizing.
So I entered my text first, and then the html code for the images.
(I tried to insert the images using markdown first, but they were also on top of each other, despite the text above being centered.)

Could there be some kind of clash between the template coding (which I can't see, and would be too inexperienced to understand anyway...) and the code I entered?

Member Avatar for JorgeM

Well, it appears so. As I mentioned, if you copy and paste the code above in a blank file and save it as a "filename.htm", if opened with a browser, you'll see the images centered and on the same line.

There are several reasons why this is not working for you. without knowing the specifics, it would be hard to tell.

If there is a style such as the display:blockthat is being applied to images, this would cause them to be on their own line in the display. I do not know if this is the cause, but it is one example.

If it is a style issue, you should be able to address it by applying an inline style. Inline styles take precendence.

So for example,

<div style="text-align: center">
  <a href="#">
    <img src="#" style="display:inline"/>
  </a>
  <a href="#">
    <img src="#" style="display:inline"/>
  </a>
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.