Question

我正在尝试将徽标居中放置在id为“ logocont”的div中，这是我的css代码，无论我如何尝试将其停留在左侧，如果我将显示块放到了导航栏的另一行，徽标将居中。

#logocont {
    display: inline-block;
    float: none;
    align-content: center;
    text-align: center;
    margin : 0 auto;
    overflow : visible;
}

注意：我使用的是网格布局，我在另一个css文件中创建了网格，并且正在链接它。

这是我的HTML代码：

<div class="gr-16" id="menu">
    <div id="logocont" class="gr-2">
        <a href="#">
            <img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
        </a>
    </div>

    <div id="navbar" class="gr-5">
        <nav>
            <a href="#">
                Home
            </a>
            <a href="#">
                Programmers
            </a>
            <a href="#">
                Request Program
            </a>
        </nav>
    </div>
</div>

Answer 1

将display inline-flex用于徽标容器

#logocont {
 display: inline-flex;
 align-items: center;
}

Answer 2

此示例将div居中于div：

<html>
<style>
    #outer {
        width: 100%;
        text-align: center;
    }

    #inner {
        display: inline-block;
        }
</style>

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Answer 3

我使用以下CSS根据我从您的HTML中了解的内容来进行垂直和水平对齐的div。您可以检查是否有帮助？（链接到JSFiddle：https://jsfiddle.net/est02o5m/1/）

CSS：

.gr-16 {
  display: grid;
}

.gr-2 {
  grid-column: 2;
  background-color: red;
  border: 1px solid black;
  grid-column-start: 1;
  grid-column-end: 2;
}

.gr-5 {
  grid-column: 5;
  grid-column-start: 3;
  grid-column-end: 8;
}

#logocont {
    width:100%;
    height: 200px;
    display: inline-flex;
    float: none;
    align-content: center;
    text-align: center;
    margin : 0 auto;
    overflow : visible;
    border: 2px solid black;
    background: #ccc;
    align-items: center;
    justify-content: center;
}

如果我使用的css与您使用的css不符，您可以补充它并更新您的问题吗？

Answer 4

我通过从div和徽标中删除nav标签来解决此问题，因此我的代码变为：

#logocont {
    width : 100px;
    display : block;
    margin : 0 auto;
}

，然后将CSS更改为：

chatForm.addEventListener('submit', function(e){
    e.preventDefault()
    //sends message
   
});

无法将徽标居中

4 个答案: