This is the sixth part of some posts on using CSS in and with DT/DTTG. Though I wrote it as a single piece, I broke it up in smaller installments to keep the posts (barely) managable. Please let me know (preferably by a PM) if you find errors of any kind or are missing details. I’ll correct the first ones and try to help with the second ones.
Previous post | Next post
How to center elements
Sometimes you might want to center certain elements, for example tables. Firstly, in many cases that only makes sense if the element is not as wide as the surrounding ones. So you should set a width value for your element that is smaller then the body’s width. After that, simply set both margin-left and margin-right to auto. That makes sure that both margins are equally wide and that the white space is evenly distributed to the left and right of your element – effectively centering it. For a table, you’d for example write
table {
width: 45ch;
margin-left: auto;
margin-right: auto;
}
Sizing and styling images
Without styling, an image will be displayed as large as possible. If it is smaller than the enclosing element (i.e. body), it will be made as wide as the body element is. If it’s smaller, it will be displayed in its original size.
The image height will be set to respect the original aspect ration and avoid distortion. There are ways to specify image width and height in the Markdown document itself, but I advise against it: It is a lot easier to style (and size) all images the same way with CSS. So,
img {
width: 50%;
}
sets the width of all images to half of their parent element.
If you try that out, you’ll notice that an image in the middle of a paragraph looks a bit weird since it interrupts the flow of the text in a funny way.
The reason for that is that an img element is rendered “inline”, like text. Since it takes up a lot more vertical space than a line of text, the text flow is interrupted.
One way to remedy this is to make images render differently:
img {
display: block;
}
Now images behave like paragraphs, i.e. they force line breaks before and after them.
Another, more visually pleasing way to style images is to make text flow around them as described below. Or you could, as shown previously, center your image in its parent element.
You might want to add a small shadow at the right and bottom margins of the image to make it stand out slightly:
img {
box-shadow: 0.3em 0.3em 0.3em #ddd;
}
does just that. Explaining the values in detail would take up too much space here, though. You might want to read about box-shadow over at MDN and play around with the parameters.
Flowing text around images
In many cases, it looks nicer if the text continues next to the image instead of having a wide blank area around the image. You can achieve this by “floating” the image:
img {
float: left;
}
makes the image stay at the left margin of the document, while the text continues at its right side. You should set the top, right, and bottom margin for the img element, too, so that the text does not crowd it.
Instead of having the text flow around the image at the right side, you can set float to right so that the image appears at the document’s right margin and the text to the left of it.
