所有代码都在 html 页面内时的文本对齐答案

【问题标题】：Text alignment when all code is within html page所有代码都在 html 页面内时的文本对齐
【发布时间】：2018-11-01 21:44:14
【问题描述】：

社区大家好，

这是我第一次问，如果我之前已经问过这个问题，我很抱歉，因为我自己找不到任何东西......

这是一个基本而复杂的问题...

无论如何，我有一个 html 页面，其中还有脚本和 css。我的目标是在特定 DIV 中垂直对齐文本。

样式是这样定义的：

#top-text{
        color:#FFF;
        font-size:5vh;
        font-family: sans-serif;
        position: absolute;
        top:0;
        left:0;
        height: 18vh;
        overflow: hidden;
/*      background-color:rgba(200,200,0,0.5); */
        box-sizing: border-box;
        padding-left: 5vh;
        width:calc(100vw - 20vh);

然后给 DIV 一个 ID

<div id="top-text">
    </div>

然后通过 Inner HTML script 命令插入

document.getElementById("top-text").innerHTML = rssData.title ;

我想垂直对齐这个，但是插入“vertical-align:middle”和“display:table cell”没有用。

有什么好的方法可以做到这一点？

我提前感谢任何可能提供答案的人。

问候

【问题讨论】：

试试display: flex; align-items: center; justify-content: center;
将 line-height 添加到 css 这也是垂直对齐文本的好选择。
泰米尔语，你的回答奏效了。谢谢你^^。我找不到将您的评论标记为答案的选项：/。

标签： html css

【解决方案1】：

您尝试过文本对齐吗？也许如果您将它添加到该 div 的 css 类中，它会在它是文本时起作用。

【讨论】：

【解决方案2】：

解决办法

document.getElementById("top-text").innerHTML = rssData.title ;

#top-text{
        color:#FFF;
        font-size:5vh;
        font-family: sans-serif;
        position: absolute;
        top: 50%;
        left: 50%;
        overflow: hidden;
background-color:rgba(200,200,0,0.5);
        box-sizing: border-box;
        width: 200px;
        width: 200px;
        padding: 10px;
        transform: translate(-50%, -50%);
}

<div id="top-text">
Lorem ipsum dolor si
    </div>

【讨论】：

嘿库马尔。感谢您的回复。不幸的是，在这种情况下替换 CSS 使文本消失了。如果我发布整个页面会有帮助吗？不大（183 行）。

【解决方案3】：

在 div 标签内的 css 中尝试 text-align

【讨论】：