CSS：文本对齐、外边距和内边距如何共同作用？

Question

我在简单引用时遇到了问题，即引用置于页面中央/浮动，并且人名在引用下方右对齐，这是我们经常看到的。我尝试将人名段落的文本对齐方式更改为“right”，但没有解决问题（它将其放置得太靠右）。因此，我把文本对齐保留为“center”，然后尝试添加padding-left和margin-left，但这两者都被忽略了，人名仍保持在中央。您能告诉我为什么会忽略这些（padding和margin），以及一个好的方法来进行对齐，使“whose-it-by”行与引用的右边缘匹配吗？您可以在这里查看页面，在灰色标题区域顶部有引用：http://www.momentumnow.biz/mn/direct/testimonials2.shtml。我想把名字移到一边，但很奇怪为什么padding和margin似乎对text-align没有影响。谢谢。

- Ray

---

请注意，我在问题中修正了几个拼写错误。 - Ray

只需记住，有专门用于引用的标签 - 您应该使用那些... blockquote 用于较长的引用，q 用于短引用。 - Christoph

Answer 1

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

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

据我所知，您想要实现类似于this的东西。尝试使用float: right

您也可以使用CSS

p.yourclass {text-align: right}

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

- jacktheripper

---

嗯，我希望它们可以堆叠在一起，一个在另一个上面，这需要使用块级元素。span元素不能堆叠，对吧？另外，请注意它们都包含在一个div中。 - Ray

已添加图片。请参见先前的问题 - 即我希望它们堆叠，而不是在一行中，因此 span 似乎没有用处。 - Ray

添加了float: right。但是不起作用——太靠右了。 - Ray

那个方法可以实现，但是也可以只设置整个元素的 text-align="right"。我之前的设计是将“引用节”放在页面中央，我仍然希望是这样。但是，在元素内部，我想要实现我描述过的对齐方式（即右对齐边缘）。谢谢。 - Ray

谢谢 - 我觉得我匹配上了，但元素现在完全不浮动了。另外，你知道为什么当text-align设置为center时，padding/margin似乎没有影响吗？ - Ray

Answer 2

你不能仅通过CSS直接实现这个。

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

这就是为什么你不能直接将人名对齐到引用的右边缘下方。

对于blocklevel-elements，margin和padding总是按照你期望的方式工作，并且对于ìnline-elements`有一些限制。我不知道你的问题是什么。

然而，通过Javascript，你可以在人名后附加 ，使其与引用的长度相匹配，并在该段落上保留text-align:center。但是，如果引用有多行，这种方法可能会遇到问题。

- Christoph

---

仍在处理中。段落是一个块级元素。因此，即使它具有居中文本对齐，填充或边距也应该对其起作用，对吧？ - Ray

嗯，不确定为什么对我没有影响。我得玩一下你的jsfiddle，看看和我的代码有什么不同。 - Ray

Answer 3

1. 您可以使用CSS如下：p.caption { float:right } 或 {text-align:right} 将其移动到右侧；如果无效，则可能存在一些代码冲突。
2. 如果您想要块级元素堆叠，可以使用CSS position（和z-index）属性。

- Snger

Answer 4

你想让引用和姓名在同一行还是让姓名与引用右对齐？

这将使引用和姓名在同一行上 -

更改此CSS。

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

- Vivek Chandra