Question

将<h1>定位到我想要的位置。

CSS文件和HTML文件

@import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
  font-family: 'Montserrat';
  padding: 0;
  margin: 0;
}

.header {
  position: relative;
  background-color: antiquewhite;
}

.header img {
  padding: 1em 2em;
  width: 10%;
  display: block;
  border-radius: 80px;
}

.header h1 {
  padding: 1em;
  text-align: center;
  font-size: 3em;
  position: relative;
}

<header>
  <div class="header">
    <img src="../Welcome/images/123.jpg" alt="">
    <h1> A Work In Progress</h1>
  </div>
</header>

我尝试了所有想到的事情。

Answer 1

我认为最好的方法是使用position:fixed：

.header h1 {
    text-align: center;
    font-size: 3em;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

无论设备进入您的网站，这将使它居中。

稍微播放带有参数的以获得所需的确切位置，您也可能希望同时在后台进行。

Answer 2

看看是否有帮助：

JSFiddle DEMO

.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}

添加了float: left;和position: fixed;，也将display更改为inline-block

重新放置h1标签，

2 个答案: