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.
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 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.
- Upload your image to the wiki. Suppose your image is called "Advertscreenshotpage.png" for this example.
- To make the image appear on a wiki page, the code would be like this:
- You can change the size of the image by setting width in pixels:
- To give that image a link, set the link parameter. In this example, I'm going to make my image link to google.com:
- 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>
- The result is a centered image with a width of 300 pixels that links to google.com:
- Footnote: Setting the width to 100% on DIVs is unnecessary. DIVs are block elements so the default
width: autocauses 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)