是否可以居中对齐标题，但将标题左对齐标题的左侧，最好是没有JavaScript？

Question

如何完成以下操作，最好不使用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。但我想先看看是否有更优雅的解决方案。

Answer 1

这就是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的.header DIV或它，所以它不会设置为inline-block占比需要更多的空间。我们将它向左推50％，然后将其拉回右侧的50％。

Answer 2

将h1和h4换成div，然后居中该div。