我目前有以下代码:
<div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px;">FABO</div>
</div>
Css就像这样:
#customOnePreviewText {
margin: 0;
position: absolute;
}
#img_preview_text_container {
position: absolute;
display: flex;
align-items: center;
}
这给了我一些看起来不错的类型。
我需要将这种类型动态地放入容器中。类型始终会更改,因此我运行了一些名为text fit js
运行此js方法后,html代码现在是这样:
<div id="img_preview_text_container" style="width: 376px; height: 75px; top: 156px; left: 50px; color: rgb(255, 0, 0);">
<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px; height: 75px; text-align: center; white-space: nowrap;">
<span class="textFitted" style="display: inline-block; text-align: center; font-size: 80px;">FABO</span>
</div>
</div>
文本不再居中,现在该类型下面有一个额外的空格。在运行此textFit.js之前不是这种情况,我可以更改些什么以消除多余的间距并使它居中?
答案 0 :(得分:3)
尝试在#customOnePreviewText中添加line-height:1
<div id="customOnePreviewText" style="font-family: Oklahoma; width: 376px;line-height:1;">FABO</div>
答案 1 :(得分:1)
这是您的id =“ img_preview_text_container”外容器的height属性。将其设置为较低的值或0或“自动”。