使用Flex将Logo置于中心位置，将菜单图标放置在右侧。

Question

使用Flex将Logo置于中心位置，将菜单图标放置在右侧。

3

如何实现屏幕中央的标志，右侧有菜单图标和文本。我已经搜索了一些flex教程，但没有找到一个实现它的方法。

请参考此图片以了解其外观。

.logo {
background-color: red;
height: 50px;
width: 50px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<nav class="navbar container">
      <div class="logo"></div>
      <div class="navbar-toggle">
        <span>Menu</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
          <path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
          <path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
          </svg>          
      </div>
    </nav>

我希望只使用 flex 来完成这个需求，不需要使用额外的空白

元素。

谢谢。

- DnD2k21

这个回答解决了您的问题吗？ https://dev59.com/vVkT5IYBdhLWcg3wL8r3 - isherwood

4个回答

1

你可以尝试这样做。这里有两个重叠的div，它们组成了标题。由于它们是重叠在一起的，所以在窄屏幕大小上要小心处理行为。

.header {
  height: 100px;
  width: 100%;
  background: grey;
  display: flex;
  justify-content: flex-end;
}
.absolute-header {
  position: absolute;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.logo-container {
  display: flex;
  flex-direction: row;
}

.logo-img {
  background: blue;
  width: 100px;
  height: 100px;
}

.center-logo {
  background: red;
  width: 150px;
  height: 150px;
}

<div class="absolute-header">
  <div class="center-logo">
  </div>
</div>
<div class="header">
  <div class="logo-container">
    <p>Your Text</p>
    <div class="logo-img">
    </div>
  </div>
</div>

- Andrew Hulterstrom

1

这是完成此操作最简单的方法：

.box {
   display: flex;
   justify-content: center;
}
.logo {
   margin-left: auto;
   // You can change the negative value based on the width on the right side's text
   margin-right: -40px;
}
.push {
   margin-left: auto;
}

<div>
  <div class="box">
    <div class="logo">YOUR LOGO</div>
    <div class="push">OTHERS</div>
  </div>
</div>

我的 FIDDLE

- Mohammed Ali

1

如果您愿意，您可以在编辑时删除您的问题，然后再恢复。 - isherwood

0

复制图像，它会是这样的。

header {
    display: flex;
    justify-content: center;            
}

.header-none {
    flex: 1 auto;
}

.header-logo {
    flex: 1 auto;
    display: flex;
    justify-content: center;
}

.header-text {
    flex: 1 auto;
    display: flex;
    justify-content: flex-end;
}

<header>
  <div class="header-none"></div>

  <div class="header-logo">
      <p>LOGO</p>
  </div>

  <div class="header-text">
      <p>TEXT</p>
  </div>
</header>

- dududornelees

你能做一些没有头部的事情吗？因为我不能在HTML中包含一些不需要的代码。 - DnD2k21

那么它就不会完全居中。 - dududornelees

我想我在某个地方用flex展示过它... 而且它正好居中... - DnD2k21

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stickers · Accepted Answer

请查看代码片段中的注释。注意，在HTML中添加了一个新的div。

.navbar {
  display: flex;  /* already in bootstrap */
  border: 1px solid; /* for demo purpose */
}

.navbar:before {
  content: ""; /* create a pseudo element */
  flex: 1; /* grow */
}

.navbar .logo {
  background-color: red;
  height: 50px;
  width: 50px;
  margin: -.5rem 0 -1rem; /* OP asked for offsets */
}

.navbar .menu {
  flex: 1; /* grow */
  display: flex; /* set flexbox */
  align-items: center; /* align vertically */
  justify-content: flex-end; /* push to right */
}

.navbar-toggle {
  background-color: pink;  /* for demo purpose */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<nav class="navbar container">
  <div class="logo"></div>
  <div class="menu"> <!-- this div class menu is NEW -->
    <div class="navbar-toggle">
      <span>Menu</span>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 6C3 6.55 3.45 7 4 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H4C3.45 5 3 5.45 3 6Z" fill="#111111"/>
          <path d="M3 12C3 12.55 3.45 13 4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12Z" fill="#111111"/>
          <path d="M3 18C3 18.55 3.45 19 4 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H4C3.45 17 3 17.45 3 18Z" fill="#111111"/>
      </svg>
    </div>
  </div>
</nav>