Css: how text alignment, margins and padding work together

Question

I am having problems with a simple quote, where the quote is centered / floats on the page, and the person’s name under the quote is aligned on the right side, as is often seen.

I tried to change the text-alignment of the paragraph of the person’s name to “right,” but that didn’t resolve it (it moved too far to the right). So, I left the text alignment alone (as the "center"), and then tried to add padding-left and margin-left, but both of them were ignored, leaving the person’s name in the center. Can you tell me why these (margins and margins) are ignored , as well as a good way to perform alignment, so that the line "someone" matches the quote on the right-Machine?

You can see the page here, with a quote at the top in the gray header area: http://www.momentumnow.biz/mn/direct/testimonials2.shtml

I want to move the name, but I'm wondering why indentation and margins don't seem to affect text alignment.

Thanks.

Answer 1

The fact that you have two p elements means that they appear on separate lines - p means a paragraph . Try placing it inside the other or wrap both in a div and apply absolute positioning. Alternatively, use my preferred method, which is to change them to span tags.

Remember that <p> is a block level element, while span is an inline element.

From what I understand, you want to achieve something like this . Try using float: right

You can also use CSS

 p.yourclass {text-align: right} 

Solution: http://jsfiddle.net/TqE2x/

Answer 2

You cannot achieve this directly with CSS only.

Using text-align:center; in the quote, you do not control how much the text will expand on the right side.

This is why you cannot align the name Person directly below the right edge of the quote.

margin and padding will always work, as you expect, on blocklevel-elements and have some restrictions on "row elements". I do not know what your problem was.

However, with Javascript you can add   to the person’s name to match the same length of the quote and leave text-align:center in this paragraph. However, you will encounter such problems if you specify several lines.

Answer 3

• You can use CSS as follows: p.caption {float: right} or {text-align: right} to move it to the right side; if it is useless, maybe some code is a conflict.
• If you want the elements of the blocks to drain, you can use CSS position (and z-index ).

Answer 4

Do you want the quote and the name to be on the same line or the name that should be right-aligned with the quote?

This will result in a quote and a name on one line -

change this css

 p.headerCenter { font-size: 15px; font-weight: bold; font-style: italic; float: left; }