1

この JSFiddleと下の図でわかるように、バナーに好きなように署名を配置するのに苦労しています (引用テキストの配置を妨げずに青いバナーの右下に配置したい)。私が抱えている問題は、現在のコードでは、テキストの 2 行目が水平方向にブロックの中央に完全に配置されていないことです (左よりも右にスペースがあります)。これを修正して、署名の位置を完全に制御するにはどうすればよいですか? どうもありがとう、

ここに画像の説明を入力

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

両方とも表示に設定されているため、互いに干渉しています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;
}

JSFミドル調整

あなたのものと比較すると、視覚的には同じように見えます (引用テキストが中央に配置されていることを除いて)。

于 2013-09-29T09:30:42.290 に答える
1

負のマージンを使用できます。

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

しかし、私はpadding外側divからmargins内側に移動し、クラスh2で使用されます:margin-leftsignature

.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 に答える