Need Help Aligning Images Horizontally

[Fivestar4everMVP]

Hi guys, i want to make a post which contains many images, and then I thought it did be nice and neat if I align the images horizontally.
That lead me into searching for the right code to use but nothing I have found seems to work.

Below are the list of codes I've tried but none of them worked -

1.

Code:

[img align=left/right/center]<image link>[/img]

2.

Code:

 [float=left/right/center][img]<image link>[/img][/float]

3.

Code:

[img float=left/right/ceter]<image link>[/img]

4.

Code:

[img style="float:left/right/center"]<image link>[/img]

I even tried something like this -

Code:

[img src="<image link>" align="left/right/center"][/img]

But it still doesn't work, I would appreciate any one who knows how to get around this.

[BlackHatCoiner]

If you want to place it in the center, use:

Code:

[center][img]IMAGE_URL[/img][/center]

If you want to place it right, use:

Code:

[right][img]IMAGE_URL[/img][/right]

If you want to place it left, there's this left align, but I, yet, fail to understand what's the purpose, everything's already left aligned:

Code:

[left][img]IMAGE_URL[/img][/left]

[DdmrDdmr]

<...>

It’s really going to depend on what type of layout you want to make with the images. Since you mention that you want to include many images, perhaps this post can serve as a basis:

https://bitcointalk.org/index.php?topic=5142007.0

It displays a bunch of images from bitcoin movies and documentaries + books in an organized manner, with the aid of a table structure.

[KingsDen]

<Snip>

I think what Op meant is not to align individual image, what he meant is to place many images side by side.
In CSS, it could be achieved by using the grid command

Code:

 {Display: grid;
Grid-template-columns: 1fr 1fr 1fr;} 

But I don't know the BBcode command for it.

It displays a bunch of images from bitcoin movies and documentaries + books in an organized manner, with the aid of a table structure.

This is a great help, creating table columns and centring each image inside the columns.

[Falconer]

If you want to place it in the center, use:

Code:

[center][img]IMAGE_URL[/img][/center]

If you want to place it right, use:

Code:

[right][img]IMAGE_URL[/img][/right]

If you want to place it left, there's this left align, but I, yet, fail to understand what's the purpose, everything's already left aligned:

Code:

[left][img]IMAGE_URL[/img][/left]

OP, did this work for you? But I think it should work this time, so give it a try.

Set the layout as you want but note that sometimes the image size must also be proportional to fit as you expect. Meaning, all that code will be useless if the image you post covers the entire page.

If the image is too big, then adjust the size with additional code like:

Code:

[img width=size_you_want]Image_Url[/img]
[img height=size_you_want]Image_Url[/img]

[BlackHatCoiner]

I think what Op meant is not to align individual image, what he meant is to place many images side by side.

Right. They should use the table tag in the center then.

If they want more space, they can use the empty character. (" ‎‏‏‎ ")

‏‏‎

‏‏‎ ‎‏‏‎ ‎‏‏‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎ ‎‏‏‎ ‎‏‏‎ ‎

‏‏‎ ‎‏‏‎ ‎‏‏‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎ ‎‏‏‎ ‎‏‏‎ ‎

Code:

[center][table][td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td][/center]

Code:

[center][table][td]‎[img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td]‏‏‎ ‎‏‏‎ ‎‏‏‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎ ‎‏‏‎ ‎‏‏‎ ‎[img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td]‏‏‎ ‎‏‏‎ ‎‏‏‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎ ‎‏‏‎ ‎‏‏‎ ‎[img]https://i.imgur.com/W9hbTRV.png[/img][/td][/center]

Edit: I've no idea what the hell happened to the first image.

[decodx]

OP, in addition to what others have said, if you are planning to publish a large number of images and align them in a specific manner, it is best to use tables. Also, keep in mind that you can use width and height attributes to improve the results even further.

Edit: I've no idea what the hell happened to the first image.

I think that's a well-known table bug/glitch.

[Xal0lex]

Edit: I've no idea what the hell happened to the first image.

.....................................

Code:

[center]
[table]
[tr]
[td][img]https://i.imgur.com/W9hbTRV.png[/img]
[table][tr][td][color=transparent].....................................[/color][/td][/tr][/table]
[/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[/tr]
[/table]
[/center]

Something like that.

[PX-Z]

Also, the simple way is just order the images without any additional tags.

Make sure that the size of the images is proportion or the same, put a space if necessary and next line/enter if you want the images show below or above. If you want to show them center then just put the images in the "center" tag

Code:

[img]https://talkimg.com/images/2023/11/14/zMD8C.png[/img] [img]https://talkimg.com/images/2023/11/14/zMD8C.png[/img]

[tranthidung]

Also, the simple way is just order the images without any additional tags.

Make sure that the size of the images is proportion or the same, put a space if necessary and next line/enter if you want the images show below or above. If you want to show them center then just put the images in the "center" tag

Code:

[img]https://i.imgur.com/W9hbTRV.png[/img] [img]https://i.imgur.com/W9hbTRV.png[/img]

This approach only works well if image size is similar (almost). If image sizes are different, then you will have unaligned rows because basically it is not set up as a table. With a table format, you will have all align in row and column, no matter what size of images.

Additional parameters should be included into your approach, with both width and height parameters. Something like

Code:

[img width=300 height=200]https://i.imgur.com/W9hbTRV.png[/img] [img width=300 heigth=200]https://i.imgur.com/W9hbTRV.png[/img]

Else, in case image sizes are different, you will get something like below

Code:

[img width=200 height=100]https://i.imgur.com/W9hbTRV.png[/img] [img width=200 height=100]https://i.imgur.com/W9hbTRV.png[/img]

[o_e_l_e_o]

Note that you do not need to specify both a height and a width, and by doing so you will usually distort your picture unnecessarily. If you want neat rows on a table, then just specify the same height for every image and the forum will automatically scale the width to match while keeping the same ratio.

[Fivestar4everMVP]

OP, did this work for you? But I think it should work this time, so give it a try.

No, the first code from @BlackHatcoiner didn't work, the images were being knocked over to the next line, and I needed them to align left, center, right.
But then, the second code which had to do with using tables worked exactly the way I wanted it.

Special thanks to every one that commented, and special thanks to @BlackHatbitcoiner, I got exactly the answer I needed and also  learnt something new, I will come back to appreciate you guys in a much more better way, am currently out of water(if you understand what I mean) 😁.

[Teletalk.org]

Png or jpg Any type of image.

Code:

 
[img width=400]https://i.ibb.co/CwnrW5m/download.png[/img]
[img width=500]https://i.ibb.co/RhD1fjm/Screenshot-2022-04-20-16-12-04-74.jpg[/img]

[nc50lc]

Edit: I've no idea what the hell happened to the first image.

The forum has a bug in displaying the first column of the table, the image may look small or if there are rows, tightly compressed.
It will show just fine in preview but not in the actual post.

The workaround is to add a dummy empty first column [td][/td] in every row,
using your example:

Code:

[center]
[table]
[td][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[/table]
[/center]

added second row:

Code:

[center]
[table]
[tr]
[td][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[/tr]
[tr]
[td][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[td][img]https://i.imgur.com/W9hbTRV.png[/img][/td]
[/tr]
[/table]
[/center]

It's cleaner than adding a whole table inside the first column because this wont add a few pixels between the first and second column.

[Cookdata]

Png or jpg Any type of image.

Off point
I count the number of replies before yours, it was more than 10 meaningful contributions from other members and this is all you could contribute?
OP is asking how to align images Horizontally, not vertical. Beside your image is too large.

@Fivestar4everMVP If you are the original designer of those images, it's best you resize them from your Corel draw, photoshop or whatever software you are using instead of using the forum width and height for adjustment. It will make them easier to align with table nc50lc recommended.