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>

它们正常工作的关键是floatingDIV.header或将其设置为inline-block这样它就不会占用比它需要的更多的空间。我们将其推向屏幕左侧 50% 的位置，然后将其拉回右侧 50% 的位置。

于 2013-07-15T17:30:18.773 回答