使用弹性布局,您可以实现理想的解决方案(或者至少非常接近)。其思想是,在有足够空间的情况下,保持左右两侧宽度相等。这可以通过将左右两部分的flex-basis设置为大于其内容大小的值来实现 - 然后它不会受内容影响,一切都会对称。
在此演示中,您可以将鼠标悬停在页面上,以使宽度变小。黑线显示正文的精确中心。
.header {
display: flex;
}
.start,
.end {
/* this value should be larger than the minimum width on a "large" screen
if it is, the content width will not determine the actual width, so start
and end part will be of the same size -> the middle is centered
using 50% - 50px here so we're neither growing nor shrinking if there is
enough space (50px is half the middle width)
*/
flex: calc(50% - 50px) 1;
}
.middle {
/* this flex-basis is kind of the targeted width of the middle part within
the star will be centered. Giving the middle a larger flex-basis than its
contents prevents the contents from touching the left part even there is
still ample space to the right
Once the middle "bumped" to start/end, the middle will shrink, but it will
still remain a space toward start/end as long as possible
*/
flex: 100px 1;
}
.middle {
text-align: center;
}
.end {
text-align: end;
}
.start,
.middle,
.end {
/* wraping would reduce the minimum width, don't want that */
white-space: nowrap;
}
/* ---
* these rules here are just for the demo, not for the layout
* ---
*/
.start,
.middle,
.end,
{
/* increase legibility without affecting horizontal layout */
padding: 10px 0;
}
.center-line {
width: 50%;
border-right: 2px solid black;
/* center on the border */
margin-left: -1px;
height: 30px;
}
html,
body {
padding: 0;
margin: 0;
}
.page {
padding: 10px;
}
.middle {
background: rgba(0, 0, 0, 0.1);
}
/* transition on hover */
.page {
transition: width 1s ease-in-out;
width: 500px;
background: rgba(0, 0, 0, 0.1);
}
:hover .page {
width: 250px;
}
<div class="page">
<div class="header">
<div class="start">Button Button Button</div>
<div class="middle">*</div>
<div class="end">Button</div>
</div>
<div class="center-line"></div>
</div>
这是一种变化,其中中间部分的宽度未知。唯一的问题是如果整个内容不能适应,则会溢出flex容器。如果你告诉中间部分它可以收缩(例如min-width: 0; overflow: hidden;
),它将在开始/结束部分收缩时立即收缩,并且当内容被裁剪时也会收缩。
.header {
display: flex;
column-gap: 20px;
}
.start,
.end {
/* this is no longer exact - */
flex: 30%;
}
.middle {
/* this flex-basis is kind of the targeted width of the middle part within
the star will be centered. Giving the middle a larger flex-basis than its
contents prevents the contents from touching the left part even there is
still ample space to the right
Once the middle "bumped" to start/end, the middle will shrink, but it will
still remain a space toward start/end as long as possible
*/
flex: 1;
}
.middle {
text-align: center;
}
.end {
text-align: end;
}
.start,
.middle,
.end {
/* wraping would reduce the minimum width, don't want that */
white-space: nowrap;
}
/* ---
* these rules here are just for the demo, not for the layout
* ---
*/
.start,
.middle,
.end,
{
/* increase legibility without affecting horizontal layout */
padding: 10px 0;
}
.center-line {
width: 50%;
border-right: 2px solid black;
/* center on the border */
margin-left: -1px;
height: 30px;
}
html,
body {
padding: 0;
margin: 0;
}
.page {
padding: 10px;
}
.middle {
background: rgba(0, 0, 0, 0.1);
}
/* transition on hover */
.page {
transition: width 2s linear;
width: 700px;
background: rgba(0, 0, 0, 0.1);
}
:hover .page {
width: 300px;
}
<div class="page">
<div class="header">
<div class="start">Button Button Button</div>
<div class="middle">This is the page title</div>
<div class="end">Button</div>
</div>
<div class="center-line"></div>
</div>