I successfully followed the instructions the instructions in the FAQ on how to center an image, but cannot figure out how to center it on the page.
When entering the body of a basic page in Full HTML mode, the text and image appears (in both the Body editing window and the publicly displayed website) with the HTML tags applied. There does not seem to be an alignment button above the text editor. When I change the editor to 'Plain text mode', I can add a "align=middle" to the image block of the raw HTML, but now the website also displays the raw HTML tags! Which editing method is best for centering an image? How do I center it?
konings@mit.edu
The first sentence in my question was a typo; I can *insert* an image, but not center it. I also don't know how to apply HTML tags to content without having it display the raw tags on the site itself. I
3/6/14
amrichar@mit.edu
Hello!
You can do this a number of ways. First, you can try to use the "unrestricted" format to put in your HTML tags. If your unrestricted format is not enabled, you can go to Configuration>content authoring>text format and enable unrestricted. This allows you to use full html in your page editing.
Note - You can put HTML tags in with unrestricted, save, then switch back to your preferred editing method so you don't have to solely use the unrestricted type!
You can also use the CSS injector to center the picture. When you select your image, there is a tab to go to advanced. Under advanced, put in a unique ID for the picture (for example, "center_image"). Then open CSS injector an type in
.center_image {display: block; margin-left: auto; margin-right: auto;}
When all else fails, you can put the image inside a table and set the table to center in the table's properties.
3/10/14
konings@mit.edu
Hi,
Thanks for the really detailed explanation, especially about the CSS injector. That worked great, and my image looks a lot better now!
3/14/14