Html 如何根据行中的其中一列将行居中

发布于03月16日

对于我的所有CSS/HTML Master，假设我有3列，每列都有不同的大小(见下图).

想象一下，我想要将第二列居中放置在页面的中心.

如果我使用justify-content: center将此行的内容居中，它将使总行居中，如下所示.

但如果我只想将页面中心的第二列居中，有点像只基于其中一列居中，但仍将所有列保持在一行中，该怎么办？

这个是可能的吗？谢谢.

附注:没有明显的答案，如"增加页边距-左至行"，解决方案需要是动态的和响应的.

<!-- Code using bootstrap v15 classes -->

<div class="row w-100">
    <div class="col-2 purple-bg">
        <span>1st column</span>
    </div>

    <div class="col-4 green-bg">
        <span>2nd column</span>
        <b class="d-block">I want this column to be centered in the page</b>
    </div>

    <div class="col-6 red-bg">
        <span>3rd column</span>
    </div>
</div>

推荐答案

网格在这方面非常有用.您可以制作3列，将左侧元素放置在第一列中，将右侧元素放置在第三列中，并将居中元素放置在中间列中，然后将第一列元素向右对齐.

.container{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
}

.col1{
    background-color: purple;
    width: 70px;
    grid-column: 1;
    justify-self: right;
}

.col2{
    background-color: green;
    width: 50px;
    grid-column: 2;
}

.col3{
    background-color: red;
    width: 90px;
    grid-column: 3;
}

.col4{
    background-color: yellow;
    width: 30px;
    grid-column: 3;
}

.col{
    height: 20px;
    grid-row: 1;
}

/* Page setup */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.vert{
    position: absolute;
    left: 50%;
    right: 50%;
    background-color: blue;
    height: 100vh;
    width: 1px;
    z-index: 10;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

<body>
    <div class="vert"></div>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
    </div>
</body>