如何停止内联块和文本对齐之间的冲突？答案

【问题标题】：how do I stop a conflict between inline-block and text align?如何停止内联块和文本对齐之间的冲突？
【发布时间】：2023-02-03 13:01:06
【问题描述】：

我正在尝试制作一个简单的顶部栏

作为一种将我一直在学习的东西付诸实践的方式我并不是在寻找解决方法尽管我希望了解正在发生的事情并修复它，以便我可以应用我最近学到的知识。（对不起，如果这会显得粗鲁）

从视觉上看应该是这样的：

||______________________centered-title___________button1__button2||

但我无法正确居中标题。将内联块添加到居中标题后，我无法将其从左侧移动，因为文本对齐停止对其产生影响

这是我的代码

网页格式

</head>
<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>

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 css

【解决方案1】：

当您将元素更改为内联块时，它不再占据其容器的整个宽度——它变成了其内容的宽度。

text-align 不再具有可见效果，因为您将其“居中”在与内容宽度相同的区域内。

您可以通过检查相关元素或在元素上放置边框来在浏览器的开发工具中看到这一点。

我强烈建议您查看 CSS flexbox 和 CSS grid 以可预测的方式排列元素。

【讨论】：

【解决方案2】：

只需使用 flexbox 模型：

<header class="contenedor">
        <div class="logo">
            <p><a href="index.php">PAGE TITLE</a></p>
        </div>
  
      <div class="title">
        centered title
      </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>

CSS：

* {
    margin: 0;
}

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

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

header {
    background: gray ;
}

.contenedor {
    display: flex;
    align-items: center;
}

.title {
  flex-grow: 1;
  text-align: center;
}

header .contacto {
    display: inline-block;
}

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

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

【讨论】：

【解决方案3】：

欢迎来到 stackoverflow @Aulmeies，

您应该为标题/导航栏使用弹性框或网格布局，因此它会缩小到任何设备宽度并变得响应。请参考我所做的更改。

MDN DOCS FOR FLEX

* {
    margin: 0;
}

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

.logo {
    text-align: center;
    flex:1; /* it makes to occupy the larger with than other */
    font-family: "Oswald";
    line-height: 70px;
}

header {
    background: gray ;
}

.contenedor {
    overflow: hidden;
    display:flex; /* flexbox layout */
}

.derecha {
    /*float: right; */
}

header .contacto {
    /*display: inline-block; */
    height:100%;
}

header .contacto ul {
    list-style: none;
    height:100%;
    display:flex;
    gap:5px;
}

header .contacto ul li {
  align-self:center;
  padding:10px;
}

<html>
<head>
</head>
<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>

【讨论】：