Admin Forum:Center and Image with a link attached

This Forum has been archived

Visit the new Forums!

Forums: Admin Central Index → Technical Help → Center and Image with a link attached

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4055 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

Hello, I would just like to know how you center an image that has a link attached on your wiki homepage? Thanks! —This unsigned comment is by Vinsega (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

The visual editor doesn't have a "center" alignment when you're adding a photo, so the first thing you'll need to do is switch source mode by clicking the Source tab in the upper-right corner of the editor. If you're not used to editing in source mode, here's a simple walkthrough of how you might write some source code to center an image.

1. Upload your image to the wiki. Suppose your image is called "Advertscreenshotpage.png" for this example.
2. To make the image appear on a wiki page, the code would be like this:

   [[File:Advertscreenshotpage.png]]

3. You can change the size of the image by setting width in pixels:

   [[File:Advertscreenshotpage.png|300px]]

4. To give that image a link, set the link parameter. In this example, I'm going to make my image link to google.com:

   [[File:Advertscreenshotpage.png|300px|link=https://www.google.com]]

5. Finally, there are some different ways to center the image. Here's one way, by putting the image into a div tag and setting CSS width:100% and text-align:center:

   <div style="width:100%; text-align:center;">[[File:Advertscreenshotpage.png|300px|link=https://www.google.com]]</div>

6. The result is a centered image with a width of 300 pixels that links to google.com:
   

Mathmagician ƒ(♫) 01:45 UTC, Tuesday, 9 October 2012

Footnote: Setting the width to 100% on DIVs is unnecessary. DIVs are block elements so the default width: auto causes them to expand to fill the entire line automatically. Auto-width is actually better than width: 100% because explicit widths set the width of the content box, not the border box, so setting width: 100% can spill the DIV off the edge of the page if it has padding or borders. Lunarity 05:06, October 9, 2012 (UTC)