Question

我尝试制作一个带滚动溢出和垂直文本对齐的html文本框。一切似乎都没问题，除了底部没有＆＃34;房间＆＃34;像顶部一样，它看起来很难看。我试过几个没有运气的属性。我附上了一个屏幕 Needs some margin below

这是html代码：

<div style="
position: absolute;
color: #FFF !important;
margin: -14px 0px 0px 469px;
text-align: left;
overflow: scroll;
width: 123px;
height: 222px;
letter-spacing: 0.5px;
background-color: rgba(81, 96, 116, 0.6);
font-size: 12px;
z-index: 10;
line-height: 222px;
">
<span style="
display: inline-block;
vertical-align: middle;
line-height: 18px;
padding: 10px;
">I use Ableton Live as main audio/MIDI sequencer, complemented by an array of 3rd party virtual FX and instruments (Toontrack®, Spectrasonics®, Izotope®, ReFX®, etc.), and a vast sample libray located in external drives</span></div>

有人能帮帮我吗？提前谢谢，

Answer 1

以下是一个可以让您接近所需内容的示例：

<div style="position:absolute; left: 100px; top:100px; width:140px;  height:140px; background: blue;">
    <div style="margin-top:20px; height:100px; overflow-y: scroll;">
        Inner div with lorem ipsum. 
        Inner div with lorem ipsum.
        Inner div with lorem ipsum.
        Inner div with lorem ipsum.
    </div>
</div>

它的主旨是将你的背景图像和定位放在一个外部div上，然后把你的文本放在一个div里面，这个div有一些margin-top和高度设置在底部提供适当的边距。内部div也控制溢出。

Answer 2

非常感谢您的帮助，在阅读了一些建议后我设法解决了这个问题，这里的代码只适合感到好奇的人：

<div style="
position: absolute;
margin: -14.4px 0px 0px 469px;
width: 123px;
height: 222.4px;
line-height: 192.4px; /*line-height = height OF INTERNAL DIV TO ACCOMPLISH CENTERED TEXT*/
background-color: rgba(81, 96, 116, 0.6);
z-index: 5;
">
<div style="
padding: 0px;
overflow-y: scroll;
vertical-align: middle;
display: inline-block;
margin: 15px 10px 15px;
height: 192.4px; /* = CONTAINER DIV HEIGHT - 2*margin */
">
<span style="
display: inline-block;
vertical-align: middle;
line-height: 16px;
color: #FFF !important;
font-size: 12px;
text-align: left;
letter-spacing: 1px;
">I use Ableton Live as main audio/MIDI sequencer, complemented by an array of 3rd party virtual FX and instruments (Toontrack®, Spectrasonics®, Izotope®, ReFX®, etc.), and a vast sample libray located in external drives</span></div></div>

请注意我不熟练，我确信这段代码不是最佳的......似乎只是这样做。

您可以在enter link description here（我的网站，仍在构建）中看到结果

谢谢大家，抱歉我的英语很差。

框内的边距/垂直文本对齐问题

2 个答案: