Fandom

Community Central

Admin Forum:Center and Image with a link attached

19,002pages on
this wiki
Add New Page
Talk0 Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

This Forum has been archived

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 1367 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 (wallcontribs) . Please sign your posts with ~~~~!

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:
    Advertscreenshotpage

20px_Rin_Tohsaka_Avatar.png 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)

Also on Fandom

Random Wiki