Editing
Help:Images
(section)
Jump to navigation
Jump to search
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
=== Vertical alignment === The vertical alignment options take effect only if the image '''is''' rendered as an inline element and '''is not''' floating. They alter the way the inlined image will be vertically aligned with the text present in the same block before and/or after this image on the same rendered row. Note that the rendered line of text where inline images are inserted (and the lines of text rendered after the current one) may be moved down (this will increase the line-height conditionally by additional line spacing, just as it may occur with spans of text with variable font sizes, or with superscripts and subscripts) to allow the image height to be fully displayed with this alignment constraint. <div class="mw-collapsible mw-collapsed"><div class="mw-collapsible-toggle toccolours" style="float:none;text-align:center">'''{{Blue|Toggle source code view}}'''</div> <div class="mw-collapsible-content"> <source lang="html4strict" enclose="div"> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> <sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> <sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]] <del>text</del></u></span></p> </source></div></div> To show the alignment result more clearly, the text spans are overlined and underlined, the font-size is increased to 200%, and the paragraph block is outlined with a thin border; additionally images of different sizes are aligned: <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> <sup>'''super:'''</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> <sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''default:''' [[File:Example.jpg|20px]] [[File:Example.jpg|40px]] [[File:Example.jpg|100px]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]] <del>text</del></u></span></p> <p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2"> <span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del> '''bottom:''' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]] <del>text</del></u></span></p> Notes: # The "middle" vertical alignment position of the image (which is also the default) usually refers to the middle between the x-height and the baseline of the text (on which the vertical middle of the image will be aligned, and on which usually the text may be overstroke), but not to the middle of the line-height of the font-height that refers to the space between the "text-top" and "text-bottom" positions ; the font-height excludes: #* the additional line separation spacing normally divided equally into two line-margins (here 0.5em, according to line-height set to 200%) above and below the font-height). #* the additional line spacing which may be added by superscripts and subscripts. # However, if the image height causes its top or bottom position to go above or below the normal full line-height of text, the middle position will be adjusted after the increasing the top and/or bottom line-margins so that the image can fit and align properly, and all images (including those with smaller heights) will be vertically centered on the adjusted middle position (for computing the effective line-height, the text of each rendered row with the larger font-height will be considered). # The "text-top" and "text-bottom" alignment positions also excludes the extra line spacing added by superscripts and subscripts, but not the additional line-spacing defined by the line-height. # The "top" and "bottom" alignment positions take into account all these extra line spacings (including superscripts and subscripts, if they are present in a rendered line span). When the image alignment constrains the image to grow above or below the normal line-spacing, and the image is not absolutely positioned, the image will cause the "top" and "bottom" positions to be adjusted (just like superscripts and subscripts), so the effective line-height between rendered lines of text will be higher. # The "underline", "overline" and "overstrike" text-decoration positions should be somewhere within these two limits and ''may'' depend on the type and height of fonts used (the superscript and subscript styles may be taken into account in some browsers, but usually these styles are ignored and the position of these decorations may not be adjusted); so these decorations normally don't affect the vertical position of images, relatively to the text.
Summary:
Please note that all contributions to Fanra's EverQuest Wiki are considered to be released under the Creative Commons Attribution Share Alike (see
Project:Copyrights
for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource.
Do not submit copyrighted work without permission!
To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:
Cancel
Editing help
(opens in new window)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Log in
Namespaces
Help page
Discussion
English
Views
Read
Edit source
View history
More
Search
Main Menu
Main page
Sections
Classes and Races
Spells, Songs, Disciplines, and AAs
Items
Zones
NPCs
Quests
Raids
Tradeskills
User Interface
Tips and Guides
EQ Links
Wiki
Recent changes
Advanced search
Random page
Help
Contact Fanra
Tools
What links here
Related changes
Upload file
Special pages
Page information