如何解决inline-block与text-align冲突导致标题无法居中的问题？

我正在制作一个简易顶部导航栏，以此将所学知识付诸实践。我并非寻求临时workaround，而是希望理解问题本质并修复，以便应用近期所学知识（若表述有冒犯之处，敬请谅解）。预期视觉布局为：||_______________________centered-title___________button1__button2||，但我无法让标题正确居中。为居中标题添加inline-block后，text-align不再生效，标题无法从左侧移动。

现有代码 #

CSS代码 #

* {
    margin: 0;
}

body {
    background: rgb(15, 17, 26);
}

.logo {
    text-align: center;
    display: inline-block;
    font-family: "Oswald";
    line-height: 70px;
}

header {
    background: gray ;
}

.contenedor {
    overflow: hidden;
}

.derecha {
    float: right;
}

header .contacto {
    display: inline-block;
}

header .contacto ul {
    list-style: none;
}

header .contacto ul li {
    display: inline-block;
    line-height: 70px;
}

HTML代码 #

<html>
<body>
    <header class="contenedor">
        <div class="logo">
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>

        <div class="derecha">
            <nav class="contacto">
                <ul>
                    <li><a href="#">SOCIALS 1</a></li>
                    <li><a href="#">SOCIALS 2</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

问题本质与修复方案 #

问题根源 #

给.logo设置display: inline-block后，该元素的宽度会收缩至内部文字的宽度，此时text-align: center仅能让.logo内部的文字在这个窄盒子里居中，但整个.logo盒子本身仍紧贴导航栏左侧，所以视觉上标题并未相对于整个导航栏居中。

修复方案：Flexbox布局（现代CSS标准方案） #

Flexbox专门解决这类对齐问题，逻辑清晰且易维护，能完美实现你要的布局效果。

方案一：绝对定位右侧元素

修改后的CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: rgb(15, 17, 26);
}

header {
    background: gray;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.logo {
    font-family: "Oswald";
}

.derecha {
    position: absolute;
    right: 20px;
}

header .contacto ul {
    list-style: none;
}

header .contacto ul li {
    display: inline-block;
    line-height: 70px;
    margin-left: 20px;
}

header a {
    color: #fff;
    text-decoration: none;
}

方案二：margin:auto自动填充空间

另一种更简洁的Flexbox实现，无需绝对定位：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: rgb(15, 17, 26);
}

header {
    background: gray;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-family: "Oswald";
    margin: 0 auto;
}

header .contacto ul {
    list-style: none;
}

header .contacto ul li {
    display: inline-block;
    line-height: 70px;
    margin-left: 20px;
}

header a {
    color: #fff;
    text-decoration: none;
}

方案说明 #

1. 两种方案都通过display: flex让header成为弹性容器，align-items: center确保所有元素垂直居中。
2. 方案一用justify-content: center让标题水平居中，同时通过绝对定位把右侧按钮固定在导航栏右侧，不影响标题的居中计算。
3. 方案二给.logo设置margin: 0 auto，让它自动填充左右剩余空间，从而实现相对于整个导航栏的居中，右侧按钮自然占据右侧位置。

原代码的问题在于：浮动元素占据右侧空间后，.logo作为inline-block元素只能在剩余左侧空间内存在，且自身宽度仅为内容宽度，text-align: center无法作用于整个导航栏宽度。

内容的提问来源于stack exchange，提问作者Aulmeies