css：text-align，margin和padding如何协同工作

Question

我很难做一个简单的引用，其中引号居中/浮动在页面上，引号下面的人名称与右侧对齐，正如人们经常看到的那样。

我尝试将此人名称段落的text-align更改为“right”，但是没有解决它（它把它放到了右边）。所以，我单独留下文本对齐（作为“中心”），然后尝试添加左边的填充和左边边距，但是这两个都被忽略了，将人的名字留在了中心。 你能告诉我为什么会忽略这些（填充和边距），这也是一种做对齐的好方法，这样“who-it-by”行与右边的引号相匹配〜边缘？

您可以在此处看到此页面，灰色标题区域顶部带引号：http://www.momentumnow.biz/mn/direct/testimonials2.shtml

我想将名称移过来，但我很好奇为什么填充和边距似乎没有影响text-align。

感谢。

Answer 1

你有两个p元素意味着它们显示在不同的行上 - p表示段落。尝试将一个放在另一个中，或将它们包装在div中，并应用绝对定位。或者，使用我的首选方法将其更改为span标记。

请记住，<p>是块级元素，而span是内联元素。

根据我的理解，您希望实现this之类的功能。尝试使用float: right

你也可以使用CSS

p.yourclass {text-align: right}

解决方案：http://jsfiddle.net/TqE2x/

Answer 2

你无法直接用CSS实现这一目标。

通过在引号上使用text-align:center;，您无法控制文本扩展到右侧的距离。

这就是为什么你不能直接在引号的右边缘下方对齐Person-Name。

保证金和填充将始终按照blocklevel-elements的预期工作，并对“线条元素”有一些限制。我不知道，你的问题是什么。

但是，使用Javascript，您可以将 附加到人名，以匹配相同长度的引号并在该段落上留下text-align:center。但是如果引用有几行，你就会遇到麻烦。

Answer 3

1. 您可以像这样使用CSS：p.caption {float：right}或{text-align：right}将其移动到右侧;如果没用，可能会有些代码冲突。
2. 如果要堆积块元素，可以使用CSS position（和z-index）属性。

Answer 4

您希望引号和名称在一行中或名称与引号对齐吗？

这会将报价和名称放在一行 -

更改此css

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