0

できればJavaScriptを使用せずに、次のことをどのように達成できますか。

|                                                                               |
|                 h1. Perfectly Centered Bold, Large Font Title                 |
|                 h4. with small byline left-aligned                            |
|                                                                               |
|  p. Regular text left-aligned in nice paragraphs. Lorem ipsum dolor sit amet, |
|  consectetur adipiscing elit. Praesent pretium leo id venenatis lobortis.     |
|  Mauris imperdiet luctus leo nec malesuada. Morbi nisl dolor, faucibus ut     |
|  condimentum nec, sollicitudin at dolor.                                      |
|                                                                               |

まだ試していませんが、h1要素の左側を特定し、JavaScript を使用して手動でh4. しかし、もっとエレガントな解決策があるかどうかを最初に見てみたいと思います。

4

2 に答える 2

4

h1 と h4 を div で囲み、その div を中央に配置します。

于 2013-07-15T17:07:53.127 に答える
2

これは、Rob Adams が提案していたことです。

http://jsfiddle.net/wUsg9/5/

CSS

.heading {
     left: 50%;
     display: inline-block;
     position: relative;
}
.heading h1,
.heading h4 {
     right: 50%;
     position: relative;
}

HTML

<div class="heading">
     <h1>Top Heading</h1>
     <h4>Sub Heading</h4>
</div>

これが適切に機能するための鍵はfloating、.headerDIVまたはそれを設定することinline-blockであり、必要以上のスペースを占有しません。画面の左 50% まで押してから、右 50% まで引き戻します。

于 2013-07-15T17:30:18.773 に答える