css: wie text-align, Margen und Polsterung arbeiten zusammen

Ich habe Probleme dabei ein einfaches Zitat, wo das Zitat zentriert ist /schwimmt auf der Seite, und der name der person unter das Zitat an der rechten Seite, wie man Sie oft sieht.

Ich versucht, die änderung der text-align-von den Namen der person, Absatz "Recht", aber nicht, lösen Sie es (es es zu weit rechts). So, ich Links text-align allein ("center") und dann versucht, indem padding-left und margin-left, aber beide wurden ignoriert, sodass die person den Namen in der Mitte. Können Sie mir sagen, warum diese (padding und margin) ignoriert, und auch ein guter Weg, um die Ausrichtung, so dass der "dessen-es-von" - Zeile entspricht, bis auf das Zitat am rechten Rand?

Sehen Sie die Seite hier, mit dem Zitat oben in der grauen Kopfleiste: http://www.momentumnow.biz/mn/direct/testimonials2.shtml

Ich möchten verschieben Sie den Namen über, aber ich bin neugierig, warum padding und margin nicht zu haben scheinen, wirkt sich mit text-align.

Dank.

Bitte beachten Sie, habe ich Fix ein paar Tippfehler in Frage.
Nur denken Sie daran, es gibt tags, die vor allem für die Zitate - Sie sollten diese ... blockquote für längere q für kurze Zitate.

InformationsquelleAutor Ray | 2012-02-23

css html

1

Die Tatsache, dass Sie zwei p-Elementen bedeutet, dass Sie angezeigt werden, auf separaten Linien - p bedeutet, dass der Absatz. Versuchen Sie, eine innerhalb der anderen, oder wickeln Sie beide in ein div, und wenden Sie die absolute Positionierung. Alternativ verwenden Sie meine bevorzugte Methode ist, Sie zu ändern, um span - tags.

Erinnern, <p> ist ein block-level-element, in der Erwägung, dass span ist ein inline-element.

Aus, was ich verstehe, Sie wollen, etwas zu erreichen, wie diese. Versuchen Sie es mit float: right

Können Sie auch das CSS
```
p.yourclass {text-align: right}
```
Lösung: http://jsfiddle.net/TqE2x/
- Hmm. Ich möchte, dass Sie zu stapeln, obwohl, mit eine über der anderen, die block-level Elemente machen. Span-Elemente nicht stacken, richtig? Beachten Sie bitte auch, Sie sind beide eingehüllt in ein div.
- Ja, siehe dieses Beispiel: jsfiddle.net/9KRjt
- Es ist unklar, was Sie anstreben, zu erreichen, bitte verbessern Ihre Antwort der post ein Bild der wollen Sie möchten kann ich Ihnen einige code!
- Siehe meine Antwort bearbeitet
- Hinzugefügt Bild. Bitte siehe Vorherige Frage-d.h. ich will, dass Sie stapeln, nicht inline, so Spanne nicht mehr nützlich zu sein scheint.
- jsfiddle.net/9KRjt/3
- Hinzugefügt float: right. Funktioniert nicht-ist zu weit rechts.
- Ich sah Ihre neuesten jsfiddle. Ich will, dass die rechten Kanten ausgerichtet. Vielleicht werde ich versuchen, align-right für beide und sehen, wie es aussieht.
- In diesem Fall benutzen Sie das jsfiddle.net/9KRjt/5
- Das funktioniert, aber so funktioniert nur die Einstellung text-align="Recht" für die ganze Sache. Was ich vor hatte, war die "Zitat-Abschnitt" in der Mitte der Seite. Ich will immer noch. Dann, im inneren, möchte ich, um die Ausrichtung habe ich beschrieben, (d.h. passenden rechten Seitenrand). Danke.
- Guter Punkt, siehe meine überarbeitete Antwort
- Danke -- ich abgestimmt es (glaube ich), aber das element nicht schwimmen überhaupt nicht mehr. Getrennt, weißt du, warum die padding/margin-scheinen nicht zu haben einen Effekt mit text-align legen Sie auf Mitte?
- Was willst du die Polsterung zu erreichen?
- Gut, bevor das Zitat/Signatur schwebte einige, wie ich erweitert den browser. Also, wenn ich konnte nur zusätzlicher Polsterung, um drücken Sie die Signatur über rechts, das wäre optimal gewesen. Vielleicht brauche ich, um eine Spanne vor der Unterschrift, und legen Sie ein Polster oder Breite auf, die Spanne?
- Dies ist ein viel ordentlicher Weise, es zu tun, wickeln Sie es in ein div mit position: absolute und setzen Sie die Rechte: 0
- jsfiddle.net/9KRjt/7
- Auf Ihrer Seite, diese anwenden von css, um Ihre wrapper-div
- style="float:right;padding-top:35px;padding-right: 20px"
- Dies ist der code, den Sie wollen! jsfiddle.net/TqE2x
- Danke Mann, das sieht gut aus. Bitte tun Sie mir einen gefallen und lassen Sie die jsfiddles, ich will Experimentieren einige mehr mit Ihren Antworten, wenn ich kann. Vielen Dank für Eure Hilfe!
- Kein problem - Sie werden es für immer sein. Sie bekommen nicht automatisch gelöscht
- Bitte fügen Sie den code in deine Antwort. Kommentare oft gelöscht zu bekommen, und diese war gekennzeichnet, als einen langen Kommentar-thread, dass war im chat.
InformationsquelleAutor jacktheripper
1

Können Sie nicht erreichen, die direkt nur mit CSS.

Mithilfe text-align:center; auf das Zitat, hast du keine Kontrolle, wie weit der text zu erweitern der rechten Seite.

Deshalb kann man nicht ausrichten, die Person-Name direkt unter dem rechten Rand der zitieren.

margin und padding wird immer so funktionieren, wie Sie wold erwarten auf blocklevel-elements und hat einige Einschränkungen auf ìnline-Elemente`. Ich weiß nicht, was Ihr problem war.

Jedoch, mit Javascript könnte man anfügen   zur person-name, passend zu der gleichen Länge des Zitats und lassen text-align:center auf den Absatz. Sie werden jedoch in Schwierigkeiten geraten, wenn Sie zitieren, hat mehrere Zeilen.
- Arbeiten noch daran. Ein Absatz ist ein block-level element. So, auch wenn es ein text-align: center, sollte nicht mit padding arbeiten, oder Marge?
- Sie tun: jsfiddle.net/9KRjt/6
- Hmm. Nicht sicher, warum, hatte es keinen Effekt für mich. Ich bin zu haben, um spielen Sie mit Ihren jsfiddle und sehen, was andere aus meinem code.
InformationsquelleAutor Christoph
1
1. Sie können CSS verwenden, wie diese: p.caption { float:right } oder {text-align:right} um es zu bewegen auf der rechten Seite ; wenn es nutzlos ist , kann code ist der Konflikt.
2. Wenn Sie möchten, dass block-Elemente zu stapeln, Sie können CSS verwenden, position (und z-index) - Eigenschaft.
InformationsquelleAutor Snger
0

Möchten Sie das Zitat und der name werden in einer einzigen Zeile oder der name angepasst werden-Recht mit dem Zitat?

Bringen würde das Zitat und den Namen auf eine einzige Zeile--

ändern Sie diese css -
```
p.headerCenter {
font-size: 15px;
font-weight: bold;
font-style: italic;
float: left;
}
```
InformationsquelleAutor Vivek Chandra

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.