Question

我已经找了一个帮助我但却找不到的答案。

HTML：

  <section id="pane_one">
    <h1 id="logo">lel</h1>
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2>
  </section>

CSS：

section#pane_one {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    min-height: 450px;
    height: 700px;
}

h1#logo {
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 200px;
    background-color: #000;
    text-indent: -9999px;
    top: 35%;
    left: 44.5%;
    margin-top: -65px;
    margin-left: -33px;

    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;

    background-size: 100%;
    border-radius: 50%;
    border: solid black;
}

如何设置它以便无论页面的缩放如何，div / image始终与其下方的文本水平对齐？

该网站是：http://libeclipse.me/

Answer 1

<html>
<head>
<style>
section#pane_one {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    min-height: 450px;
    height: 700px;
}

h1#logo {
position:relative;
    z-index: 0;
    width: 200px;
    height: 200px;
    background-color: #000;
    text-indent: -9999px;
    top: 200px;
display: inline-block;
    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
    background-size: 100%;
    border-radius: 50%;
    border: solid black;
}

h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
  <section id="pane_one">
    <h1 id="logo">lel</h1>
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2>
  </section>
  </body>
<html>

查看并记下边距：自动（以绝对位置为中心的h2text）并显示：inline-block（以兔子图像为中心）。

删除了h1＃徽标中存在的左侧％和边距。享受。

感谢。

Answer 2

在h1#logo规则上，将left更改为50%，将margin-left更改为-100px

将div中的图像与下面的文本对齐

2 个答案: