Question

首先，我看到this post尝试将其置于中心位置。我尝试了解决方案但它没有用。我出于某种原因找不到其他任何东西。

如果我将Navbar的高度从其默认大小更改（因此它可以将我的徽标保持在适当的大小），导航栏链接和汉堡包菜单不再垂直居中。链接位置我可以修复，但我没有做任何垂直中心汉堡包按钮。这是我从React-Bootstrap站点为Navbar复制的代码，当处于响应模式时，汉堡包按钮永远不会垂直居中。它位于页面的右上角。这是我从React-Bootstrap网站复制的代码......

<Navbar collapseOnSelect staticTop>
    <Navbar.Header>
        <Navbar.Brand>
           <img id='headerLogo' src={require("../images/logo.svg")} />
        </Navbar.Brand>
        <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav pullRight>
            <NavItem eventKey={1} href="#">Home</NavItem>
            <NavItem eventKey={2} href="#">About</NavItem>
            <NavDropdown eventKey={3} title="Portfolio" id="basic-nav-dropdown" pullRight>
                <MenuItem eventKey={3.1}>Main</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.2}>Photography</MenuItem>
                <MenuItem eventKey={3.3}>Graphic Design</MenuItem>
                <MenuItem eventKey={3.4}>Motion Graphics</MenuItem>
            </NavDropdown>
        </Nav>
    </Navbar.Collapse>
</Navbar>

My SCSS is here

如何垂直居中汉堡菜单按钮？

Answer 1

灵活方法怎么样？
我创建了一个codepen来展示align-items和justify-content的工作原理。我使用这个分配来确保中心元素在所有情况下保持居中。

HTML：

<div class="container">
  <div class="button">
    <span class="logo">
      LOGO
    </span>
  </div>
</div>

CSS：

.container {
  align-items: center;
  background: red;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.button {
  align-items: center;
  background: green;
  display: flex;
  justify-content: center;
  height: 50%;
  width: 50%;
}

你如何将Rebar-Bootstrap中的Navbar汉堡包按钮居中？

1 个答案: