将内容居中到父级，左侧有框答案

【问题标题】：Centre content to parent with box to the left将内容居中到父级，左侧有框
【发布时间】：2021-11-03 11:18:01
【问题描述】：

我想要一个如下布局：

因此，我有一个父容器，其中居中的是一个面包屑。但是，我还想要一个浮动到面包屑左侧的容器内的徽标，但尊重面包屑的边界。

我一直在玩 flexbox，只能让它与绝对定位徽标一起工作，这意味着面包屑不尊重徽标的边界。

我在这里建立了一个 JSFiddle 游乐场：https://jsfiddle.net/joyqwpc1/25/。

困难的是，标志可以是可变宽度，因此设置边距不可行。

body {
  margin: 0;
}

#container {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 50px;
}

#logo {
  height: 50px;
  width: 50px;
  background-color: blue;
  position: absolute;
  left: 0;
}

#breadcrumb {
  width: 200px;
  height: 20px;
  background-color: green;
}

<div id="container">
  <div id="logo"></div>
  <div id="breadcrumb"></div>
</div>

【问题讨论】：

标签： html css flexbox navbar

【解决方案1】：

我为徽标和面包屑创建了 2 个单独的容器，并为它们设置了宽度。然后，我对齐了这些容器内的元素。

https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/

<div id="container">
<div class="logoContainer">
  <div id="logo">
  
  </div>
</div>

  <div class="breadcrumbContainer">
    <div id="breadcrumb">
    
  </div>
  </div>

</div>

body {
  margin: 0;
}

#container {
 background: red;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
}
.logoContainer{
  width: 10%;
  height: 100%;
  background: yellow;
}

#logo {
  height: 50px;
  width: 100%;
  background-color: blue;
} 

.breadcrumbContainer{
  width:90%;
  display: flex;
  justify-content: center;
}
#breadcrumb {
  width: 200px;
  max-width: calc(100% - 2rem);
  height: 20px;
  background-color: green;
}

【讨论】：

这会使面包屑在其容器中居中。 OP 要求它在父容器中居中。

【解决方案2】：

对于干净的解决方案，需要一点 JavaScript：
确保单击“使用 JS 运行” 按钮：https://jsbin.com/ziziqidole/edit?html,output

<html>
  <head>
    <script>
      function handleResize() {
        var crumb = document.getElementById("breadcrumb");
        var logoWidth = document.getElementById("logo").offsetWidth;

        var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
        if (calcWidth < 10) {
          calcWidth = 10;
        }
        crumb.style.marginLeft = calcWidth;
      }
    </script>
    <style media="all">
      body {
        margin: 0;
      }

      #container {
        background: red;
        display: flex;
        align-items: center;
        height: 50px;
        padding-right: 50px;
      }

      #logo {
        height: 50px;
        width: 150px;
        background-color: blue;

        flex-shrink: 0;
      }

      #breadcrumb {
        width: 200px;
        height: 20px;
        background-color: green;
      }
      #center {
        width: 200px;
        height: 20px;
        margin: 0 auto;
        background-color: khaki;
        text-align: center;
      }
    </style></head
  >
  <body onresize="handleResize()" onload="handleResize()">
    <div id="container">
      <div id="logo"></div>
      <div id="breadcrumb"></div>
    </div>
    <div id="center">Page Center</div>

  </body>
</html>

没有 JavaScript 的解决方案。但是需要一些硬编码，例如徽标宽度和面包屑宽度。
https://jsbin.com/juxijowova/edit?html,output

<html>
  <head>
    <style media="all">
      body {
        margin: 0;
      }

      #container {
        background: red;
        display: flex;
        align-items: center;
        height: 50px;
        padding-right: 50px;
      }

      #logo {
        height: 50px;
        width: 150px;
        background-color: blue;

        flex-shrink: 0;
      }

      #breadcrumb {
        width: 200px;
        height: 20px;
        background-color: green;

        position: absolute;
        left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
        transform: translate(-50%, 0);

        /*margin: 0 auto; 
          margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
      }
      #center {
        width: 200px;
        height: 20px;
        margin: 0 auto;
        background-color: khaki;
        text-align: center;
      }
    </style></head
  >
  <body>
    <div id="container">
      <div id="logo"></div>
      <div id="breadcrumb"></div>
    </div>
    <div id="center">Page Center</div>

  </body>
</html>

【讨论】：

【解决方案3】：

这通常是我放置这样的东西的方式：3 个容器，侧面 2 将弯曲以平均填充空间，因为它们具有相同的精确基础（自动基础会破坏这一点，因为左侧的“徽标”内容将包含在左容器的基础）。中间根据内容调整大小并保持居中，除非它变得太宽并开始占用右侧空间并变得不居中。

.f-row {
  display: flex;
}

.left-box {
  flex: 1 1 0.0000001px;
  padding: 1em;
  border: 1px solid blue;
}

.middle-box {
  padding: 1em;
  border: 1px solid red;
  justify-self: center
}

.right-box {
  padding: 1em;
  border: 1px solid green;
  flex: 1 0 0.0000001px;
}

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb</div>
  <div class="right-box"></div>
</div>

<br><br>

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb > Longer > Space</div>
  <div class="right-box"></div>
</div>

<br><br>

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
  <div class="right-box"></div>
</div>

【讨论】：