people occasionally share the last snippet post i made, so here's how i make the bumper sticker posts. this one also has no particularly interesting tricks but might be handy for some people (particularly people new to HTML/CSS).

in case you're not that familiar with HTML, change the part between <div> and </div>. Or, to make it simpler, replace the middle line with your text:

<div style="border: 4px solid black; text-transform: uppercase; width: 200px; margin-left: auto; margin-right: auto; text-align: center; font-weight: bold;" >
bumper sticker text here
</div>

results in

bumper sticker text here

For curious HTML/CSS newcomers, here's what all the parts do:


  • <div> creates a unit that we can change the format of. there are a lot of nuances to different elements that don't really matter here.
  • border: 4px solid black adds a four-pixel wide solid border that's black.
  • text-transform: uppercase makes all the text uppercase. this isn't really necessary but is kind of convenient
  • width: 200px makes the bumper sticker 200 pixels wide. i just kind of experimented with different widths until i found one that looked good. if you mess around with CSS, UI, or computer graphics somewhat frequently, you'll probably get a sense of how long different pixel lengths are, in much the same way you probably have a rough sense of how long a meter or a foot is.
  • margin-left: auto and margin-right: auto combined center the bumper sticker in the body of the post. basically auto picks a margin width automatically based on the width of the item, and if you set both margins to auto, it splits the difference. that means if there's no width specified it will technically be centered, but it will expand to take up the entire width.
  • text-align: center aligns the text within the sticker.
  • font-weight: bold makes the text bold.

with just margin-left: auto:

bumper sticker text here

with just margin-right: auto:

bumper sticker text here

with margin-right: auto and margin-left: auto but no width:

bumper sticker text here

You must log in to comment.