Tutorials

How to put graphics side by side, or in the middle

Pictures behave like words: put them one after the other and they sit side by side, and when the line is full the next one moves to the next line. Once you know that, a row of graphics, a neat wall of them, or one graphic in the middle of your page is a matter of one or two lines.

Side by side, all by themselves

Put the pictures one after the other in your code, and that is how they show:

<img src="kitty.gif" width="48" height="48" alt="Kitty">
<img src="crab.gif" width="50" height="50" alt="Crab waving">
<img src="hearts.gif" width="50" height="50" alt="Hearts">

Why are mine below each other?

Something between them starts a new line. Usually it is a <br> (a line break) or a <p> (a new paragraph) - in code you copied, it is easy to miss one:

<img src="kitty.gif" width="48" height="48" alt="Kitty"><br>
<img src="crab.gif" width="50" height="50" alt="Crab waving">

Take the <br> out, and they are side by side again. The code of a graphic of 130 pixels wide or more on Glitter Graphics ends with a <br> and a small link under the picture: that one is meant to go under it.

A neat row that wraps

For a whole row of them - blinkies under your name, buttons of your friends - put them in a box that lines them up with the same space between each, and starts a new row when the line is full:

<div class="row">
  <img src="animal-lover.gif" width="150" height="20" alt="Animal lover">
  <img src="music-is-life.gif" width="150" height="20" alt="Music is life">
  <img src="bubblewrap.gif" width="155" height="20" alt="Bubblewrap">
</div>

<style>
  .row { display: flex; flex-wrap: wrap; gap: 6px; }
</style>

gap is the space between them; make it 0 and they touch. Add justify-content: center; to the .row and the rows sit in the middle.

In the middle

Put the pictures in a box and center what is in it:

<div class="middle">
  <img src="kitty.gif" width="48" height="48" alt="Kitty">
  <img src="hearts.gif" width="50" height="50" alt="Hearts">
</div>

<style>
  .middle { text-align: center; }
</style>

For one picture alone, there is another way: make it a block of its own, with as much room left as right of it.

<img src="puppy.gif" width="67" height="68" alt="Puppy" style="display: block; margin: 0 auto">

The old way. On the old web everything was in <center> and </center>. Browsers still understand it, but it is retired: text-align: center does the same job, the way it is meant to be done.

Good to know

• A small space between two pictures? That is the space or line break between them in your code, which counts as a space, as between words. Put the tags right after each other to make them touch, or use the row with gap: 0.
• A thin gap under a picture? A picture sits on the line like a letter, with room under it for letters like g and y. Give it display: block, or vertical-align: middle, and the gap is gone.
• A small graphic in a line of text, at the height of the words: give it vertical-align: middle.
• Graphics that are too big for a phone? Add max-width: 100%; height: auto; to them: they get smaller when there is no room.
• A small graphic bigger instead? See How to show a small GIF bigger without blurring it.

Good to know next

How to show a small GIF bigger without blurring itOne line of CSS keeps a blinkie crisp at twice or three times its size.How to put a glitter graphic on your website, blog or profileThe code under every graphic, and where it goes: Neocities, Blogger, WordPress, SpaceHey.How to add blinkies to your Neocities pageCopy the code or upload the GIF, a wall of blinkies, and a blinkie of your own.

All tutorials