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

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 /图像始终与其下方的文本水平对齐？

该站点是： 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>

对此进行检查并记下margin：auto（将h2text居中在绝对位置）并显示：inline-block（将兔子图像居中）。

删除了h1＃logo中剩余的％和边距。 请享用。

谢谢。

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
2 2016-04-09 22:27:42

解决方案2
1 已采纳 2016-04-09 21:57:50

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

问题描述

2 个解决方案

解决方案1 2 2016-04-09 22:27:42

解决方案2 1 已采纳 2016-04-09 21:57:50

解决方案1
2 2016-04-09 22:27:42

解决方案2
1 已采纳 2016-04-09 21:57:50