html - 文本出现在 div 的较高部分

<分区>

我目前有以下 html。

<div id="img_preview_text_container" style="position: absolute; top: 156px; left: 50px; font-family: Oklahoma; width: 376px; height: 75px; color: rgb(255, 0, 0);">
<div class="customOnePreviewText">ASDF</div>
</div>

.customOnePreviewText 的 css 是:

.customOnePreviewText {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 48px;
}

我遇到的挑战是文本出现在 div 的上部。我希望该类型在 div 中居中，这意味着不是底部部分关闭或整个 div 只是文本的大小。这就是我现在所拥有的。

黑色区域是突出显示的div。

最佳答案

您可以将边距从 0 调整为 0 25%(0 上/下，25 左/右)，而不是在内部 div 中使用翻译居中写作。 (见片段 - 虽然你看不到片段中的图像，但你明白了)

.customOnePreviewText {
  margin: 0 25%;
  position:absolute;
  top: 50%;
  font-size: 48px;
}

<div id="img_preview_text_container" style="position: absolute; top: 156px; left: 50px; font-family: Oklahoma; width: 376px; height: 75px; color: rgb(255, 0, 0);">
<div class="customOnePreviewText">ASDF</div>
</div>

上面的替代方法是使用 translateX(50%)，但我认为上面的方法更简单。您的代码似乎显示了 translateY 的混淆用法(将文本向下移动而不是横向移动)。另一种解决方案是设置左侧位置。

我强烈建议切换到使用相对位置，因为您可能会发现定位文本和图像的任务要简单得多 - 只需我两便士。

祝你好运!

关于html - 文本出现在 div 的较高部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58868019/

上一篇：css - 如何在网格中的 bootstrap 4 中使用粘性顶部类

下一篇：css - 是否可以将 block 声明用作 CSS 自定义属性？

相关文章：

css - 使用 Susy 自定义网格系统

html - 居中联系表单内容

javascript - ng-disabled Angular js 来评估获取 $http.get 的函数

html - 在组类和跨度内格式化文本(对齐文本)

html - 联系表不会在父 div 中居中

jquery - 使用 jQuery.css 在 Internet Explorer 中获取值

javascript - 如何使用转换将元素位置从 x1 转换为 x2？

javascript - 是否有我可以使用的跨平台、跨浏览器关键字来引用系统字体？

html - 如何修复背景图像？

jquery - 根据该 anchor jquery中的特定文本向 anchor 添加一个类