时间戳

首页 > 解决方案 > 无论两侧的div如何，如何对齐div中心

html - 无论两侧的div如何，如何对齐div中心

问题描述

这是基本的 html，.left 和 .right div 我无法控制它们的宽度，它们可能比我现在拥有的更小或更大，但无论它们的宽度如何，我都需要将中心 div 始终保持在.内部容器。

因为左边只有 200px 宽，右边是 400px 宽，所以 .center 容器不在中心。

    .header{
      background-color: blue;
      height: 60px;
      width: 100%;
    }
    .inner{
      width: 1200px;
      margin: 0 auto;
      height: 60px;
      background-color: pink;
    }
    .left{
      width: 200px;
      min-width: 0px;
      max-width: 500px;
      height: 60px;
      background-color: red;
      display: inline-block;
      opacity: 0.2;
    }
    .center{
      width: 100px;
      height: 60px;
      background-color: blue;
      display: inline-block;
      margin: 0 auto;
      opacity: 1;
    }
    .right{
      width: 400px;
      min-width: 0px;
      max-width: 500px;
      height: 60px;
      background-color: red;
      float: right;
      opacity: 0.2;
    
    }
 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    
      <div class="header">
          <div class="inner">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
      </div>
      
    </body>
    </html>

我在这里上传了jsbin

欢迎任何指示或解决方案

标签： htmlcss

解决方案

问题的约束：目标是.center在容器中居中。请注意，确保这 100% 涵盖了所有内容，但至少应该是一个良好的开端。请注意每个设置的 CSS 中的所有注释。更详细地显示上下文并添加边框和颜色来说明。

  1. 中心必须以定义为.inner类的包含元素为中心
  2. 容器.inner有宽度
  3. .left和.right元素有不同的内容
  4. 使用最大1200px宽度，左右手取 1200 像素中的 1100 像素，或每个最多 550 像素。
  5. 注意.left,.right设置： flex-grow: 0;/* set to 1 to make them take/fill max-width */ 比较两个片段，这是唯一的变化

.header {
  background-color: blue;
  height: 60px;
  border: solid 1px blue;
  display: flex;
  flex-basis: 1200px;/* how much */
  flex-direction: row; /* across */
}

.inner {
  display: flex;
  flex-direction: row; /* across */
  flex-wrap: nowrap;
  flex-grow: 5;/* relative number */
  flex-shrink: 5;/* relative number */
  /* flex-basis: 1200px;/* how much, sets width if un-comment */
  /*min-width: 1200px;*//* override basis */
  /* max-width: 1200px;*/ /* override basis */
  /*width:100%;*/
  background-color: pink;
  border: solid lime 4px;
}

.left,
.center,
.right {
  display: flex;
  /*flex:1;*/ /*display: inline-block;*/
  flex-direction: column;
  border: 2px solid;
}
.left,
.right {
  flex: 0 1 0px; /* shorthand for next 3 */
  flex-grow: 0;/* set to 1 to make them take/fill max-width */
  flex-shrink: 1;
  flex-basis: 100px;/* effective min width */
  min-width: 0px; /* limits applied overrides basis if greater */
  max-width: 550px; /* limits applied overrides basis */
}

.left {
  background-color: lime;
  border-color: magenta;
}

.center {
  display: flex;
  flex: 0 0 100px; /* shorthand for next 3 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
  min-width: 100px; /* limits applied overrides basis */
  max-width: 100px; /* limits applied  overrides basis */
  justify-content: left;
  flex-direction: row;
  /* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
  background-color: lightblue;
  border-color: blue;
}

.right {
  background-color: orange;
  border-color: cyan;
}

.showcenter {
  text-align: center;
/* min-width: 1200px; /* override width min */
   max-width: 1200px; /* set max */
  width: 100%;/* overridden by min/max */
  border: dashed 2px blue;
}

.centerthing {
  border-right: 1px dotted;
  border-left: 1px dotted;
  width: 100px;
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="header">
    <div class="inner">
      <div class="left">lefty</div>
      <div class="center">middle</div>
      <div class="right">righty</div>
    </div>
  </div>
  <div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>

</html>

.header {
  background-color: blue;
  height: 60px;
  border: solid 1px blue;
  display: flex;
  flex-basis: 1200px;/* how much */
  flex-direction: row; /* across */
}

.inner {
  display: flex;
  flex-direction: row; /* across */
  flex-wrap: nowrap;
  flex-grow: 5;/* relative number */
  flex-shrink: 5;/* relative number */
  /* flex-basis: 1200px;/* how much, sets width if un-comment */
  /*min-width: 1200px;*//* override basis */
  /* max-width: 1200px;*/ /* override basis */
  /*width:100%;*/
  background-color: pink;
  border: solid lime 4px;
}

.left,
.center,
.right {
  display: flex;
  /*flex:1;*/ /*display: inline-block;*/
  flex-direction: column;
  border: 2px solid;
}
.left,
.right {
  flex: 0 1 0px; /* shorthand for next 3 */
  flex-grow: 1;/* set to 1 to make them take/fill max-width */
  flex-shrink: 1;
  flex-basis: 100px;/* effective min width */
  min-width: 0px; /* limits applied overrides basis if greater */
  max-width: 550px; /* limits applied overrides basis */
}

.left {
  background-color: lime;
  border-color: magenta;
}

.center {
  display: flex;
  flex: 0 0 100px; /* shorthand for next 3 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
  min-width: 100px; /* limits applied overrides basis */
  max-width: 100px; /* limits applied  overrides basis */
  justify-content: left;
  flex-direction: row;
  /* width: 200px; ignored due to flex-basis but messes with border and .inner containment if set */
  background-color: lightblue;
  border-color: blue;
}

.right {
  background-color: orange;
  border-color: cyan;
}

.showcenter {
  text-align: center;
/* min-width: 1200px; /* override width min */
   max-width: 1200px; /* set max */
  width: 100%;/* overridden by min/max */
  border: dashed 2px blue;
}

.centerthing {
  border-right: 1px dotted;
  border-left: 1px dotted;
  width: 100px;
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class="header">
    <div class="inner">
      <div class="left">lefty</div>
      <div class="center">middle</div>
      <div class="right">righty</div>
    </div>
  </div>
  <div class="showcenter"><span class="centerthing">centered 100px element just to provide a measure</span></div>
</body>

</html>

推荐阅读