This is something that annoys me very often.
If you create a <div>
and style the border (for example, border-radius: 3px;
) the text is almost on top of the border, which looks very bad.
The only solution I could come up with was wrapping the contents of that div in another div, and move the wrapping div ±3px to the right.
This creates a lot extra mark-up, and it somehow doesn't feel right, as if there is a bettr solution.
So here's my question:
Is it possible to move the contents of a div three pixels to the right as described above with css-only?
Of course I'd like a cross-browser solution, but I don't mind 1 css rule per browser, I can throw that somewhere at the bottom of my stylesheet and never look at it again, that won't complicate the markup.
Select the text that you want to align. On the Home tab, in the Paragraph group, click Align Left or Align Right .
To center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs.
padding-left:3px;
Add that to your div which has the text in it.
Read more about padding: http://www.w3schools.com/css/css_padding.asp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With