1

正如您在此 JSFiddle和下图所见，我正在努力将签名放置在我的横幅中（我希望它位于蓝色横幅的右下角，而不会干扰引用文本的对齐方式）。我遇到的问题是，在我当前的代码中，文本的第二行没有完全水平对齐到块的中间（右边的空间比左边的空间多）。我该如何解决这个问题并完全控制签名位置？非常感谢，

在此处输入图像描述

HTML：

<div class="block blueback center">
    <h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
  </div>

CSS：

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}

h2 {
    color: #2165CB;
    font-weight: 600;
    font-size: 18px;
}

.white { color: #fff;
    letter-spacing: 1px;
    font-style: italic;
    font-weight: 300;
    display: inline;

}

.center {
    vertical-align: middle;
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
}

.signature {
display: inline;
margin-top: 20px; 
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
  background: #0064C4;
}
4

3 回答 3

1

您可以使用负边距：

.signature{
    margin-right: -20px;
}

但我会将其padding从外部移动div到margins内部h2并margin-left在类上使用signature：

.block {
    display: block;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

h2 {
    color: #2165CB;
    font-weight: 600;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
}
.signature{
    margin-left: <put here>
}
于 2013-09-29T09:23:13.640 回答
1

您还需要float: left;为您的white类定义您float: right;为您的.signature和您可以管理的其他内容（例如边距和填充）定义的内容。

演示

于 2013-09-29T09:29:27.007 回答
1

它们相互干扰，因为它们都设置为inline显示。将签名浮动到右侧从与报价相同的行开始。因此，浮动最终会减少引用感知到的宽度量，结果是视觉上偏离中心。

我不确定为什么inline有必要。您可以将它们都保留为block显示，然后将引用的文本向右对齐。

CSS：

.white {
    color: #fff;
    letter-spacing: 1px;
    font-style: italic;
    font-weight: 300;
    padding: 0;
    margin: 0;
}

.signature {
    font-size: 12px;
    color: #fff;
    text-align: right;
    font-weight: 700;
    padding: 0;
    margin: 0;
}

JSFiddle调整

如果您将其与您的进行比较，它在视觉上看起来是相同的（除了引用文本现在居中）。

于 2013-09-29T09:30:42.290 回答