Question

我创建了4列。前三列应该包含垂直放置的文本。问题是我无法对齐它。 justify-content和align-items没有将文本定位在列的中心。如果运行代码，您将看到它位于右侧。我希望它完全在中心。

body{
    margin:0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}
.forAll{
    height: 100vh;
    display: flex;
    justfiy-content: center;
    align-items: center;
    text-align: center;
    padding: 0;

}
.verticalOption{
    transform: rotate(270deg);
    line-height: 10px;
}
.verticalOption a{
    text-decoration: none;
    color: white;
    font-size: 10px;
    line-height: 5px;
    white-space: nowrap;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
    <div class="no-gutters">
        <div class="fluid-container d-flex flex-row-reverse">
            <div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>

            <div class="container col-xl-1 col-1 col2 forAll bg-warning">
                <h1 class="verticalOption"><a href="#">Sample Text</a></h1>
            </div>

            <div class="container col-xl-1 col-1 col3 forAll bg-danger">
                <h1 class="verticalOption"><a href="#">Sample Text</a></h1>
            </div>

            <div class="container col-xl-1 col-1 col4 forAll bg-success">
                <h1 class="verticalOption"><a href="#">Sample Text</a></h1>
            </div>
        </div>
    </div>
</body>

Answer 1

我在列中添加了另一个flex容器，因此可以在HTML嵌套中进一步控制对齐方式。我还将该列的内容证明为center。我还使h1显示inline-flex删除了所有多余的空格。

在这里添加了所有类：

<div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
  <h1 class="verticalOption d-inline-flex m-0">
    <a href="#">Sample Text</a>
  </h1>
</div>

演示

body{
    margin:0;
    padding: 0;
    height: 100vh;
    width: 100vw;
}
.forAll{
    height: 100vh;
    display: flex;
    justfiy-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
}
.verticalOption{
    transform: rotate(270deg);
    line-height: 10px;
}
.verticalOption a{
    text-decoration: none;
    color: white;
    font-size: 10px;
    line-height: 5px;
    width: 200px;
    white-space: nowrap;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
    <div class="no-gutters">
        <div class="fluid-container d-flex flex-row-reverse">
            <div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>

            <div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>
            </div>

            <div class="container col-xl-1 col-1 col3 forAll bg-danger d-flex justify-content-center">
                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>
            </div>

            <div class="container col-xl-1 col-1 col4 forAll bg-success d-flex justify-content-center">
                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>
            </div>
        </div>
    </div>
</body>

Answer 2

只需将text-align：置于h1的中心即可。

如果这不起作用，则很可能是因为您将宽度硬编码到标签上，并且200px可能比容器本身大。

Answer 3

对不起，我在justify-content: center中遇到错字了，导致了这个问题。

Answer 4

您只需在useEffect中添加两行：

.verticalOption

并删除vertical-align:center; display:table-cell;

文字未居中对齐

4 个答案:

演示