Question

如何阻止水平滚动条影响div内文本的垂直对齐？我希望文本居中，滚动条可以在它下面。

是否也可以将滚动条放在外部div的下侧（不影响其高度）并影响内部div的滚动？

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
}

.inner {
  border: 1px solid red;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
}

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
    ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
  </div>
</div>

屏幕截图

红线是中间，文字需要在那里，这不是因为它以整个div为中心，包括滚动条在其中

Answer 1

您可以使用flex轻松地垂直居中文字：

    .inner {
  display: flex;
  align-items: center;
  border: 1px solid red;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
 }

 .text {
   margin: auto;
 }

    <html>
  <body>
  <div class="outer">
    <div class="inner">
     <p class="text">Text here</p>
    </div>
  </div>
  </body>
</html>

对于你在div之外的滚动条的第二个问题，我不认为你能做到，但也许有人在这里有解决方案：）

Answer 2

添加line-height。 line-height = height。

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
}

.inner {
  border: 1px solid red;
  height: 50px;
  line-height: 50px;
  overflow: scroll;
  white-space: nowrap;
}

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
    ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
  </div>
</div>

div的水平滚动条影响垂直对齐

2 个答案: