我正在使用包含内联列表的固定宽度和居中页脚。
我希望能够缩小窗口大小并让我的元素向左和向右溢出,保持内容的中心居中。
如果我的页脚中的元素是内联的,我怎么能实现这一点?
编辑:示例
#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>
答案 0 :(得分:0)
您可以尝试使用position: fixed
(或absolute
),然后将left
偏移调整为50%,并使用CSS转换属性将块元素向左翻译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>