It is highly recommended that you customize vertical alignment for inline images in your custom CSS file according to your own use case, as the default CSS will not fit all use cases.
There are so many use cases that no CSS will fit everyone, but as an example below is CSS for users with perfectly sized icon images without margins. This code positions the images inline with the bottom of the text. (If you want the icon to be aligned in the middle of the text line, just change the first vertical-align to "middle" instead of "baseline").
Tip
Read more about possible vertical alignment adjustments, see Mozilla.
-
Add the following code to your CSS file:
.inlinemediaobject img:not([height]):not([width]) { height: 80%; vertical-align: baseline; } .inlinemediaobject { vertical-align: baseline; } -
Upload your CSS file to your HTML layout, see Upload Customized CSS.
Note
If you want to use the valign attribute on the inline images in your topics ("top", "middle", "bottom"), to have individual vertical alignment for certain inline images, you would need to either reduce the height value above, or increase the lineheight of the enclosing block element in your CSS (such as the p tag). Otherwise such attributes would have no effect as there would be no space for such alignment.
Comments
0 comments
Article is closed for comments.