时间戳

首页 > 解决方案 > 当正文有填充时，如何保持滚动条向右对齐？

html - 当正文有填充时，如何保持滚动条向右对齐？

问题描述

我正在使用带有标题和正文组件的模式。正文具有左右填充以使文本居中。但是，这也在推动滚动条。有没有办法在使用填充使正文居中时保持滚动条向右对齐？

 <div className="CoverageInfoModalInnerBox">
            <span className="fa fa-close closeBtn" onClick={onCloseModal} />
            <div className="CoverageInfoModalInnerContent">
              <h3 className="headerText">Basic Coverage Includes</h3>
              <h4 className="subHeaderText">State Minimum Bodily Injury</h4>

              <p className="subText">
                 Some body text
              </p>

</div>

.CoverageInfoModalInnerBox {
    font-family: Lato, sans-serif;
    background-color: $white-color;
    width: 90%;
    padding: 30px 30px 20px;
    margin: auto;
    height: 100%;
    position: relative;
    border: 2px solid rgba(43, 89, 126, 0.5);
  }

.CoverageInfoModalInnerContent {
    height: 100%;
    overflow-y: auto;
  }

在这里，来自 .CoverageInfoModalInnerBox 的填充正在推动 body 元素的滚动条。我希望能够右对齐正文滚动条并且仍然能够使用填充。不确定这是否可能。

标签： htmlcssreactjsjsx

解决方案

我不会为填充设置硬值，而是考虑使用 flex 使文本居中。CoverageInfoModalInnerContent类似乎是父类。我会尝试添加以下代码。

.CoverageInfoModalInnerContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

我会从身体上移除填充物，让 flex 自动为你居中。还有你在 HTML 中使用 className 属性的原因吗？

推荐阅读