html - 允许居中元素溢出到屏幕左侧和右侧

Question

我正在使用包含内联列表的固定宽度和居中页脚。

我希望能够减小窗口大小并让我的元素向左和向右溢出，同时保持内容居中。

如果页脚中的元素是内联的，我该如何实现？

图片示例:

编辑:示例

#p-wrapper {
    width:100%; 
    position:fixed;
    bottom: 0;
    height: 25%;
    height: 25vh;
    min-height: 11em;
    max-height: 14em;
    padding: 0;
}

#p-body {
    background: grey;
    border-top: 5px solid black;
    width: 100%;
    height: 100%;
}

/* Tuts */
ul {
    padding: 0;
    height: auto;
    white-space: nowrap;
    overflow: visible;
    overflow-x: visible;
    text-align: center;
}
    li {
        list-style:none;
        display:inline-block;
        margin: 0;
        padding: 0;
        background:#fff;
        height: 10em;
        width: 5em;
        position:relative;
        border: 1px solid black;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;       
    }

<div id="p-wrapper">
        <div id="p-body">
            <ul id="piano">
                 <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
                <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
                <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
            </ul>
        </div>
    </div>

Answer 1

您可以尝试使用 position: fixed(或 absolute)，然后将 left 偏移量调整为 50%，然后使用 CSS 变换将 block 元素向左平移 50% 的属性。

这可能有效，但实现细节将取决于您其余的布局。

.footer {
  width: 500px;
  text-align: center;
  border: 1px dotted blue;
  position: fixed;
  left: 50%; 
  transform: translateX(-50%);
}

<div class="footer">This footer text is centered and has a fixed width.</div>