标题部分中的文本定位

Question

有什么解决方法如何在标题部分中移动文本？ 我有一封<h1>标记的电子邮件，我想从页面左侧移动20％，从右侧移动50％，但我只能找到text-align:right,left，等等。

我添加了图像，因此您可以在页面顶部看到带有电子邮件和查看购物篮的黑框。如何以自己喜欢的方式移动文本？

Answer 1

有几种方法可以定位类似的东西...

定位

您可以使用absolute和relative定位元素，如下例所示，可以将position: relative用作父容器，将position: absolute用作对象。子元素，然后使用：top，right，bottom或left并定义您希望子元素与父元素之间的距离。如下面的示例所示。

http://jsfiddle.net/8aL05tey/4/

header.header {
  position: relative;
}

header.header h1 {
  position: absolute;
  left: 20%;
}

<header class="header">
  <h1>
   email@email.com
  </h1>
</header>

Flexbox

您还可以使用flexbox来响应地定位元素。如果您从来没有弄过Flexbox，可能会很难理解，因为里面有很多带有解释的SO问题。您还可以阅读一些有关属性here的信息。

浮动

与positioning一起，您可以使用float和float: left左右float: right div和其他元素。您可以准备更多有关浮点数here的信息。 ：）

  

要实现的目标有很多选择，没有真正的“正确”答案，这是在探索最适合您的东西！

祝你愉快！