将文本与中间的行水平对齐[重复]答案

【问题标题】：Horizontally align text with lines in the middle [duplicate]将文本与中间的行水平对齐[重复]
【发布时间】：2019-11-05 20:57:20
【问题描述】：

   .header-center {
    	display: flex; align-items: center;
    	margin-top: 1%;
    }
    .header-center span {
    	background-color: yellow;
    	color: #86281e;
    	font-weight: 600;
    	padding: 0% 5%;
    	text-align: center;
    }
    .header-center-line {
    	background-color: #86281e;
    	flex-grow: 1;
    	height: 3px;
    }

<div class="header-center">
		<div class="header-center-line"></div>
		<span>some text</span>
		<div class="header-center-line"></div>
	</div>

我用上面的代码在页面中间显示一些文字，左右横线。这段代码似乎工作正常，除了它将两个单词分成不同的行而不是一个。我该如何解决这个问题？

【问题讨论】：

请您更新您的问题以包括您遇到问题的操作系统、浏览器和浏览器版本吗？您问题中的代码 sn-p 在我测试过的所有浏览器（Chrome、Firefox、IE Edge）中都正确显示。
副本不会在文本周围显示动态增长/缩小的彩色框，就像 OP 的代码试图做的那样。我无法在此处提供解决整个问题的答案，因为它已关闭，因此我在此处提供了完整的有效答案：xitalogy.com/no-nav-pages/stackoverflow/…我希望这对 OP 和其他人有价值。

标签： css

【解决方案1】：

将display: inline-block; 添加到.header-center-line

.header-center {
    display: flex; align-items: center;
    margin-top: 1%;
}
.header-center span {
    background-color: yellow;
    color: #86281e;
    font-weight: 600;
    padding: 0% 5%;
    text-align: center;
}
.header-center-line {
    background-color: #86281e;
    flex-grow: 1;
    height: 3px;
    display: inline-block;
}

<div class="header-center">
    <div class="header-center-line"></div>
    <span>some text</span>
    <div class="header-center-line"></div>
</div>

【讨论】：

【解决方案2】：

尝试添加width: max-content;

这样

.header-center span {
    background-color: yellow;
    color: #86281e;
    font-weight: 600;
    padding: 0% 5%;
    text-align: center;
    width: max-content;
}

【讨论】：