2012-02-23 17 views
4

引用符が中央に表示され、ページ上に浮動小数点が表示され、見積もりの​​下に表示される人物の名前が、見る。css:テキストアライメント、余白、パディングの併用方法

人の名前の段落の文字列を「右」に変更しようとしましたが、それは解決しませんでした。だから、私はテキストアラインメントだけを(中央として)残し、パディングを左と余白左に追加しようとしましたが、それらの両方は無視され、人の名前は中央に残されました。 これらの(パディングとマージン)が無視される理由を教えてください。また、「それによって行なわれる」行が右端の見積もりに一致するように、整列を行う良い方法はありますか?

あなたは灰色のヘッダ領域でトップに引用して、こちらのページを見ることができます:http://www.momentumnow.biz/mn/direct/testimonials2.shtml

私は名前の上に移動したいのですが、パディングとマージンが影響していないようですなぜ好奇心テキスト整列で

enter image description here

感謝。

+0

ご迷惑をおかけしますが、ご了承ください。 – Ray

+0

ちょうど引用符用のタグがあることを覚えておいてください。長いタグは 'blockquote'、短い引用符は' q'を使うべきです。 – Christoph

答えて

1

2つのp要素があるということは、それらが別々の行に表示されていることを意味します。pは段落を意味します。一方をもう一方の内側に配置するか、div内に両方をラップして絶対配置を適用してください。または、私の好みの方法を使用して、spanタグに変更してください。

<p>はブロックレベルの要素ですが、spanはインライン要素です。

私が理解するところでは、thisのようなものを達成したいと考えています。あなたが引用して名前がで右に整列される単一の行または名前になりたいhttp://jsfiddle.net/TqE2x/

+0

Hmm。私はそれらを積み重ねて、ブロックレベルの要素が何をするかを上にする。スパン要素はスタックされません。また、divにラップされていることに注意してください。 – Ray

+0

はい、この例を参照してください。http://jsfiddle.net/9KRjt/ – jacktheripper

+0

あなたが達成しようとしていることは不明です。投稿の回答を改善してください。 – jacktheripper

0

:また

p.yourclass {text-align: right} 

は、ソリューションのCSSを使用することができfloat: right

を使用してみてください見積もり?

これは、あなたが唯一のCSSと直接それを達成することはできません。このCSS

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

単一line--に

変更を引用し、名前をもたらすだろう。

引用符にtext-align:center;を使用すると、テキストが右側にどれだけ拡大されるかが制御されません。

そのため、Person-Nameを見積もりの​​右端のすぐ下に配置することはできません。

あなたは、blocklevel-elementsに期待しているので、余白と埋め込みは常に機能し、「ライン要素」にはいくつかの制限があります。私はあなたの問題が何だったのか分かりません。

ただし、Javascriptを使用すると、人名に&nbsp;を追加して、同じ長さの見積もりに一致させ、その段落にtext-align:centerを残すことができます。しかし、あなたはいくつかの行を引用した場合、このようにトラブルに遭遇します。

+0

まだ作業中です。パラグラフはブロックレベルの要素です。だから、たとえそれが中央のテキスト整列を持っていても、それに対してパディングをしてはいけませんか? – Ray

+0

彼らは:http://jsfiddle.net/9KRjt/6/ – Christoph

+0

うん。なぜそれが私のために効果がなかったかわからない。私はあなたのjsfiddleで遊んで、私のコードとは違うものを見なければなりません。 – Ray

1
  1. p.caption {float:right}または{text-align:right}のようにCSSを使用すると、右側に移動できます。それが役に立たない場合、いくつかのコードが競合する可能性があります。
  2. ブロック要素をスタックする場合は、CSS position(およびz-index)プロパティを使用できます。
関連する問題