How do you center images in a table? [closed]

+6 votes
326 views
I am building a table and the text is centred but the photos are all bunched on the left sides of the boxes.  What coding can I put in to center the photos in the entire table?

Currently using:

{| Border = ''1''; text align = center
|+ Name of Table
|-
|Display
|Image name
|Description
|-
|[[Image:anyimage.png | 50px |Any image ]]
|Anyimage.png
|This is an image
|-

thanks in advance for help on this
closed with the note: Thanks Steven and Gaile for the quick education and tips - problem solved.
in WikiTree Help by SJ Baty G2G Astronaut (1.2m points)
closed by SJ Baty

I was going to hazard a possible answer from stuff I've done on Wikipedia and ISOGG, dealing with the |center parameter. But I thought better of answering because WikiTree uses a version of WikiMedia (v.1.11.0) that was released in September 2007. So I honestly have no idea what markup is and isn't supported without doing some trial-and-error experimentation. A handy--and pretty thorough--reference to the matter for the current iteration of Wikitext can be found here: https://en.wikipedia.org/wiki/Help:Table.

It doesn't appear to be the simple one word insertion I was looking for.

If I put <center>image name</center> inside of each cel, each photo is centered.  I am surprised that there isn't a simple "image align = center" to be added to the top of the table.

Yep. You're correct about that. According to Wikitext info, "You can position the entire table, the contents of a row, and the contents of a cell, but not with a single parameter for all the contents of the table."

It's kind of a pain in regular CSS for websites, too. Tables themselves are block level elements, so you can't center the contents of cells with a <table style="text-align: center;"> declaration. You can, though, do it without tables and using CSS Grid styling, but that still alienates browsers more than two years old...or about a year for MSIE. But I digress...

Back to the topic.

Did you try setting your cell width for the images at exactly the width for them?

Ya know, I just remembered this: https://www.tablesgenerator.com/mediawiki_tables. I have no idea if it would make things any easier--or even work for what you need--but it might maybe possibly give you a WYSIWYG way to build the table and save some time.

I've only used it a couple of times, and then only to import a CSV file just to save me some typing in longish tables. But, maybe...

No, do you know how to do that?  I'd love to learn.

edit:

added (and this fixed the cell width):

{| Border = ''1''; text align = center
|+ Name of Table
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|

Thanks Melanie for the idea and Edison for the link!

2 Answers

+5 votes
 
Best answer

SJ, if you use a bang (!) instead of a pipe (|) at the start of a cell then I believe it will be centered.  It will also probably be bold, though.  Bang indicates that a cell is a header.

The thing I usually do is to add extra cells in the first row of the table with 2 or 3 or 4 or maybe more (by trial and error) spaces in them, using the space entity (&nbsp;) to hard code them.  Example:

{{
|dog
|&nbsp;&nbsp;&nbsp;
|cat
|&nbsp;&nbsp;
|horse
|-
|woof
|
|meow
|
|whinny
}}


If you want more precision (but still not exactly centered) then you can use the spaces in each cell, as needed - a very painstaking process!  It's not a solution, but maybe it will help.  Please note that I have often said how much I hate wiki code - this is one example of why.

by Gaile Connolly G2G Astronaut (1.2m points)
selected by SJ Baty

An upvote for Gaile's last sentence.  devil

We limp along with Wikitext because we have to, and not just here. But it does have more flexibility than some options. Some other options. A bit more flexibility. A little bit. I gotta quit before I dig this hole any deeper...

Well I'll be darned:  ! instead of a | centers the photo just like magic.  Bold is fine because there is only a photo in the box, but interestingly, I don't see bold in the preceding boxes in the same row.  Either way, Thanks Gaile!  yes

You hate wiki code?  I've never heard you say that before! wink

Oh, SJ, believe me, you don't want to get me started on what I think of wiki code.  Actually "code" is a generous word to call it.  Any markup language, of necessity, makes content more difficult to read (for people, although computers have no problem with it) because it is inserting formatting instructions inline with the content that will be displayed.  Even a computer, though, needs to be able to differentiate between the content and the instructions.

Legitimate markup languages use things called tags to contain instructions by enclosing them between tag start and end characters.  For HTML, the "<" (less than symbol, often called left angle bracket, typically upper case of the comma on most English keyboards) is the start of a tag and the ">" (greater than symbol, often called right angle bracket, typically upper case of the period on most English keyboards) is the end of a tag.  Whatever is between those symbols is an instruction to be followed and not to be displayed.

There are two kinds of tags - container and empty.  Container tags operate on document content, so it is necessary to have a start and end version of these tags in order to "contain" the document content to which the instruction applies.  One example is that you may want some text to be bold - HTML uses the <b> start tag and the </b> end tag for this … for example, the word(s) contained by the bold <b>tag set</b> will be displayed as bold and the text before and after it will not be bold.  

Note how HTML also uses the same tag for start and end, except puts a / (forward slash, typically lower case of question mark at right of bottom row on most English keyboards) at the beginning of the end tag.  In the case of an empty tag - one that does not operate on document content, but is a different kind of formatting command - HTML uses a sort of shorthand for a start and end tag all wrapped up in a single tag - an example is <br /> used to force a new line at the point where it is placed (think of it as a line break).  This has the tag name, followed by a space, then ending with a /.

The big difference between a real markup language like HTML and wiki hocus pocus is that HTML is consistent - ALL instructions are in tags and all tags follow the same rules.  Wiki garbage uses some of the same tags as HTML (<br /> is one of these) but also designates certain characters as codes when they are used in very specific ways … if they're used in other ways then they are interpreted as document content to be displayed, rather than formatting instructions to be followed.  Probably the most extreme absurdity is bold and italic.  If you type an apostrophe or a quote (that looks like a double apostrophe), it is part of your document content.  If you type two apostrophes in a row, that starts italic and the rest of your document will be displayed in italic text until you type two apostrophes in a row again to end italic.  Note that the edit page looks like there is a quote where it is really 2 apostrophes, making it nearly impossible for you to differentiate between code and content.  The only way to be sure which it is requires you to move your curser across the text to see if it's 2 apostrophes or 1 quote mark!!!  Next, we get to bold, which is the same thing, except 3 apostrophes … and if you want bold and italic, then you use 5 apostrophes.

Most of the characters that vary between code and content follow the rule that if they are the first thing on a new line then they are code, otherwise they are content.  So … if you start a line with an asterisk, it will make that paragraph a bulleted item.  If you want to start a line with an asterisk, you have to first type a space, then the asterisk, to make it content.  The same is true for #, :, and =, with = being an entire kludge all by itself, where the number of equal signs represents hierarchical heading levels … ah, but I'm already up to indigestion and don't have the stomach to keep going.

+5 votes

Gaile has one possible solution below, the bang (!) will indeed center the image (and since it is not text, the bolding that is normally applied will have no affect). This is not normally recommended for line items, but it does work.

{| border=''1''
|+ Name of Table
|-
! Display
! Image name
! Description
|-
[[Image:Anyimage.png|50px|Any image]]
| Anyimage.png
| This is an image
|}

On another note, are you trying to center everything in the table? I see you put:

{| Border = ''1''; text align = center

but this is malformed and will center the entire table because the code only sees (align=center). If you want to center everything (text and images) in the their cells, you would use:

{| border=''1'' style="text-align:center"

by Steven Harris G2G6 Pilot (755k points)
Even better, thanks!  Yes, that fixes the photos and other text boxes that now look better too!

Cool. I learned something new about Wikitext! I'm gonna go send Gaile a private message to tell her how excited I am...  devil

Played with the box sizes and all and all, I think it is coming out OK.  The purpose of this page is that I've answered several questions in the last weeks on how to add a medal template and where to find medal images.  We don't have a one stop place that lists ALL of them so I'm one Sunday into building it:

United States Armed Forces, Decorations, Awards, and Badges

Superior work on this page, SJ!
Yes, SJ--really beautiful work!

Related questions

+7 votes
1 answer
295 views asked Jan 9, 2023 in WikiTree Help by David Randall G2G6 Pilot (360k points)
+4 votes
1 answer
+3 votes
4 answers
158 views asked Mar 27 in WikiTree Help by Jerry Regan G2G6 Mach 1 (10.4k points)
+4 votes
1 answer
+6 votes
2 answers
+4 votes
1 answer
+7 votes
0 answers
248 views asked Sep 3, 2023 in The Tree House by Kay Knight G2G6 Pilot (605k points)
+4 votes
1 answer
+3 votes
1 answer

WikiTree  ~  About  ~  Help Help  ~  Search Person Search  ~  Surname:

disclaimer - terms - copyright

...