对于这篇文章的神秘标题感到抱歉，但是...... this responsive webpage标题的HTML是：
<!-- header -->
<header>
<hgroup>
<!-- space ( ) in <span> is necessary to show background-image (logo)! -->
<h1><txp:site_name /><span> </span></h1>
<h2><txp:site_slogan /></h2>
</hgroup>
</header>
在text-align:center;（和其他一些CSS）上使用header，我得到了我想要的广告媒体。在小型设备上，它变得非常混乱（当然）。
我的问题：上面的HTML是否可以按此顺序堆叠（居中）所有内容：
| logo |
| h1 |
| h2 |
...这样它可以很好地适应较小的屏幕？
答案 0 :(得分：0)
您可以使用float属性，text-align和clear从伪元素:before
http://codepen.io/gcyrillus/pen/rfElA <h1>文本也包装在容器中，此处为<b>用于展示目的。这是清理文本的唯一方法。
<span>，对于徽标来说应该是<img>，并且有一个很好的alt="trademark logo"，所以它存在:)。
答案 1 :(得分：0)
尝试使用flexbox模型
类似的东西：
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item's contents vertically */