[英]How to get (h1 + (span)) + (h2) into (span) + (h1) + (h2) …?
Sorry for the cryptic title of this post, but ... on this responsive webpage the HTML of the header is:很抱歉这篇文章的标题含糊不清,但是……在这个响应式网页上,标题的 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>
With text-align:center;
使用
text-align:center;
on header
(and some other CSS) I get what I want ... on wide media that is.在
header
(和其他一些 CSS)上,我得到了我想要的......在广泛的媒体上。 On small devices it becomes very messy (off course).在小型设备上它变得非常混乱(当然)。
My question: is it possible with above HTML to stack (center) everything in this order:我的问题:上面的 HTML 是否可以按以下顺序堆叠(居中)所有内容:
| logo |
| h1 |
| h2 |
... so that it can fit nicely on smaller screens? ...以便它可以很好地适应较小的屏幕?
You could achieve this using float
property, text-align
and clear
getting little help from pseudo-element :before
您可以使用
float
属性、 text-align
和clear
来实现这一点,从伪元素中获得很少的帮助:before
http://codepen.io/gcyrillus/pen/rfElA <h1>
text is wrap in a container too , here a <b>
for the purpose of the show. http://codepen.io/gcyrillus/pen/rfElA
<h1>
文本也被包裹在一个容器中,这里是一个<b>
用于展示的目的。 it is the only way to clear down the text.这是清除文本的唯一方法。
<span>
, should be an <img>
for the logo with a nice alt="trademark logo"
, so it exists :) . <span>
,应该是带有漂亮alt="trademark logo"
的标志的<img>
,所以它存在:)。
Try using the flexbox model尝试使用 flexbox 模型
something like:就像是:
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item's contents vertically */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.