Question

我在一个不是全角（715px）的容器中有一个全角元素。该容器未居中，因为它旁边有一个侧边栏（245像素）。

由于它是动态的，所以我不能绝对将其放置在一个矩阵中。

无论屏幕大小如何，如何确保始终将其居中？

margin: auto margin-left: 50%

不起作用，使用百分比并在视觉上进行操作是不可行的，因为一旦屏幕尺寸更改，全宽元素就不再居中

HTML

<section class="grid">
    <div class="grid__item one-quarter">
        <ul>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </div>
        <div class="grid__item three-quarters">
            <div class="page-builder-item">
                <h1>Some content in an element</h1>
            </div>
            <div class="page-builder-item">
                <h1>Some content in an element</h1>
            </div>
            <div class="page-builder-item full-width">
                <h1>Some content in an FULL WIDTH element</h1>
            </div>
    </div>
</section>

CSS

.grid {
    width: 960px;
    display: flex;
    margin: auto;
}

.grid-item {
    display: inline-block;

}

.one-quarter {
    width: 25%;
    border: 1px solid red;
}
.three-quarters {
    width: 75%;
    border: 1px solid blue;
}

.page-builder-item {
    background: pink;
    height: 100px;
    width: 100%;
}

.page-builder-item.full-width {
    width: 100vw;
    background: magenta;
    margin-left: -25%;
}

链接到codepen示例https://codepen.io/hellojessicagraham/pen/pxedav

Answer 1

通常，我认为最好将孩子元素保留在其父母的范围内，因为这样做可能会非常棘手。但是，如果您需要使用此布局，则可以尝试以下操作：

margin-left: calc((-1 * 960px * .25) - (50vw - (.5 * 960px)));

我敢肯定，可以将其缩短，但是为了清楚起见，我想保留完整的计算。第一部分-1 * 960px *.25移动洋红色框以使其左边缘与网格的左边缘对齐。第二部分50vw - (.5 * 960px)然后将品红色框进一步移动，使其左边缘与浏览器的左边缘对齐。

问题在于它有些脆弱。非常在很大程度上取决于'grid'元素的确切宽度和左列的百分比宽度。

CSS Tricks上有一篇很好的文章，介绍比父母宽的居中项。它的解决方案并不直接适用于这种情况，但是它是更好地了解您的选择的好资源，我用它来开发我使用的calc语句

在未居中且宽度不全的容器内时，如何使100vw物品居中？

1 个答案: