Need Help Aligning Images Horizontally

Cookdata

hero member

Activity: 994

Merit: 893

Not Your Keys, Not Your Bitcoin

Quote from: Teletalk.org on April 20, 2022, 06:14:29 AM

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.

nc50lc

legendary

Activity: 2394

Merit: 5531

Self-proclaimed Genius

Quote from: BlackHatCoiner on April 19, 2022, 04:19:40 PM

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.

Teletalk.org

member

Activity: 224

Merit: 26

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]

Fivestar4everMVP

legendary

Activity: 2310

Merit: 1068

Leading Crypto Sports Betting & Casino Platform

Quote from: Falconer on April 19, 2022, 04:11:06 PM

Quote from: BlackHatCoiner on April 19, 2022, 02:24:44 PM

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) 😁.

o_e_l_e_o

legendary

Activity: 2268

Merit: 18588

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.

tranthidung

legendary

Activity: 2310

Merit: 4085

Farewell o_e_l_e_o

Quote from: PX-Z on April 19, 2022, 06:49:02 PM

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]

PX-Z

hero member

Activity: 1498

Merit: 872

Top Crypto Casino

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]

Xal0lex

staff

Activity: 2436

Merit: 2347

Quote from: BlackHatCoiner on April 19, 2022, 04:19:40 PM

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.

decodx

hero member

Activity: 1428

Merit: 931

🇺🇦 Glory to Ukraine!

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.

Quote from: BlackHatCoiner on April 19, 2022, 04:19:40 PM

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

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

BlackHatCoiner

legendary

Activity: 1512

Merit: 7340

Farewell, Leo

Quote from: KingsDen on April 19, 2022, 04:00:40 PM

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.

Falconer

legendary

Activity: 2506

Merit: 1125

Quote from: BlackHatCoiner on April 19, 2022, 02:24:44 PM

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]

KingsDen

legendary

Activity: 1092

Merit: 1024

Goodnight, o_e_l_e_o 🌹

Quote from: BlackHatCoiner on April 19, 2022, 02:24:44 PM

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.

Quote from: DdmrDdmr on April 19, 2022, 02:34:34 PM

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.

DdmrDdmr

legendary

Activity: 2338

Merit: 10802

There are lies, damned lies and statistics. MTwain

Quote from: Fivestar4everMVP on April 19, 2022, 02:16:35 PM

<...>

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://bitcointalksearch.org/topic/blockchain-books-bitcoin-movies-and-documentaries-updated-5142007

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

BlackHatCoiner

legendary

Activity: 1512

Merit: 7340

Farewell, Leo

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]

Fivestar4everMVP

legendary

Activity: 2310

Merit: 1068

Leading Crypto Sports Betting & Casino Platform

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][/img]

2.

Code:

 [float=left/right/center][img][/img][/float]

3.

Code:

[img float=left/right/ceter][/img]

4.

Code:

[img style="float:left/right/center"][/img]

I even tried something like this -

Code:

[img src="" align="left/right/center"][/img]

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

Topic: Need Help Aligning Images Horizontally (Read 272 times)