Question

有人知道如何将文本放置在容器之后，但仍然居中。有人知道怎么修这个东西吗？出于某种原因，如果我不将该程序放在最后，则该程序将停在标语图片的后面；如果我尝试居中，则该程序将不起作用。我希望它们都居中，但示例要放在横幅后面，但是无论何时尝试，都不会让我将文本放到正确的高度并同时居中

.container {
    position: relative;
    text-align: center;
    color: white;
}
.top-left {
    position: absolute;
    top: -8px;
    left: -10px;
}
.bottom-left {
    position: relative;
    top: 29vh;
    left:50%;
    transform: translate(-50%, -50%);

}

<div class="container">
    <img align="left">
    <div class="top-left">
    <img src="C:\Users\wadeb\OneDrive\Desktop\Untitled design.png" alt="Banner Picture" style="width:100vw;height:33vh" style="margin: 0px px"></p>
    </div>
    <div class="bottom-left">
    <a href="C:\Users\wadeb\AppData\Roaming\Sublime Text 3\Packages\User\Church Website.html">Home</a>
</div>
<h3 style=" text-decoration-style: bold; position: absolute;top:34vh; text-align: center;">example:</h3>
</div>

有什么想法吗？

Answer 1

您做错了所有事情，您不应该那样做img align，只需在img url之后添加它

<img src="url" align="left">

您是否要求它们都居中？如果您是的话，只需在容器div之前添加<center>标签，两个标签都将居中。更精确。

Answer 2

我在How to center a "position: absolute" element找到了答案我要做的就是添加

<span style="position: absolute; top: 38vh; left: 0%;right: 0%; text-align: center;">

然后我简单地做到了

{{1}}

横幅居中后文字未显示

2 个答案: