Menu
Here's the deal. Instead of just underlining my paragraph and using text-align, I want to add a dotted border underneath and center it inside the paragraph's parent div. This is my code that is not working. (It adds the border across the whole div instead of just the paragraph)
p { border-bottom:1px dotted; margin-left:auto; margin-right:auto; text-align:center; } The paragraph seems to be taking on the width of the parent div. Is there a way to set the paragraph's width to the text it contains? (It seems that margin:auto would work if possible.)
226
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
To set a specific width for Paragraph element using CSS, set width property with required value for the selected paragraph elements in styles(inline/external).
When an element has auto as a value for width, it can have margin, padding, and border without becoming bigger than its parent element. The width of its content box will be the content itself with the subtraction of margin, padding, and border.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Paragraphs are going to expand to the width of their containers. To make it not do that, you could try:
p { display: inline-block; } Fiddle with example: http://jsfiddle.net/HuFZL/1/
Also, you may want to wrap the p tags in an additional div, if you need them to clear other paragraphs/elements.
115
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
