html - 内部 div 不会垂直居中或左对齐

Question

容器 div 内的 div 既不会垂直居中也不会左对齐。

所需的布局基本上是内容框左侧的关闭框。为此，close 和 content box 各自驻留在各自的 div 中。这两个 div 是 flex 显示 div 的子元素，具有左水平元素对齐 (justify-content: flex-start) 和垂直对齐顶部 (align-items:start)。该 flex display div 是具有左水平对齐和居中垂直对齐的通用容器 flex display div 的子元素。 (最外层)通用容器的尺寸以 vw、vh(--> 相对)给出。

请看下面的代码。

但是，内部 div 总是水平居中，所以当我增加窗口宽度时，一般容器会变宽，并且其中的内容会向右移动以保持居中。

请帮我解决这个问题。

风格:

.content-area {  
    position: absolute;  
    left: 2vw;  
    top: 10vh;  
    width: 30vw;  
    height: 80vh;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: flex-start;  
    }  

.content-control {  
    position: relative;  
    margin: 0 0 0 0;  
    display: flex;  
    flex-direction: row;  
    align-items: start;  
    justify-content: flex-start;  
    overflow: hidden;  
    background-color: #808080;  
    }

#content-data {  
    position: relative;  
    margin: 2vh 0 2vh 0;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    overflow: hidden;  
    }  

.close-btn-area {  
    margin: 1vmin 1vmin 1vmin 1vmin;  
    width: 4vh;  
    height: 4vh;  
    display: flex;  
    align-items: start;  
    justify-content: right;  
    cursor: pointer;  
    -webkit-user-select: none;  
    -khtml-user-select: none;  
    -moz-user-select: none;  
    -o-user-select: none;  
    -ms-user-select: none;  
    user-select: none;  
    }  

#info-content {  
    font-family: 'Alegreya Sans SC', Verdana, sans-serif;  
    font-variant: small-caps;  
    color:#404040;  
    background-color: #a0a0a0;  
    }  

HTML:

<div class="content-area" id="info-area">  
    <div class="content-control" id="info-control">  
        <div class="close-btn-area" id="close-info">
            <img class="close-btn" 
                 id="close-btn-info" 
                 src="images/close-btn-inverted-128x128.png">
         </div>
         <div class="content-data" id="info-data">  
                <article id="info-content">  
                </article>  
         </div>  
    </div>  
</div>  

要获得快速视觉印象，请打开 http://www.descent2.de/S/index.html然后单击顶部的第二个链接(“Schmücken”)。我为每个 div 赋予了不同的背景颜色(关闭框除外):

• 黑色:通用容器
• 深灰色:将关闭框 div 与文本框 div 左侧对齐的容器
• 浅灰色:文本框div

使浏览器窗口足够宽，您将开始看到关闭框和文本框如何居中而不是保持在左侧。

Answer 1

.page {
  width: 100vw;
  height: 100vh;
  background: lightpink;
}

.content-area {
  position: absolute;
  left: 2vw;
  top: 10vh;
  width: 30vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  background: black;
}

.content-control {
  position: relative;
  margin: 0 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: flex-start;
  overflow: hidden;
  background-color: #808080;
}

#content-data {
  position: relative;
  margin: 2vh 0 2vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.close-btn-area {
  margin: 1vmin 1vmin 1vmin 1vmin;
  width: 4vh;
  height: 4vh;
  display: flex;
  align-items: start;
  justify-content: right;
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#info-content {
  font-family: 'Alegreya Sans SC', Verdana, sans-serif;
  font-variant: small-caps;
  color: #404040;
  background-color: #a0a0a0;
}

<div class="page">
  <div class="content-area" id="info-area">
    <div class="content-control" id="info-control">
      <div class="close-btn-area" id="close-info">
        <button class="close-btn" id="close-btn-info">X</button>
      </div>
      <div class="content-data" id="info-data">
        <article id="info-content">
          <h1>decorate</h1>
          <p>Why decorate? What does decorate mean? How to decorate? Beauty is a value in itself. Decorating is always a highlight for me, a highlighting of the </p>
        </article>
      </div>
    </div>
  </div>
</div>

当使用flex-direction: column时，justify-content作用于纵轴，align-*作用于横轴。因此，它被水平居中并放置在 flexbox 的顶部。这是否回答了您的问题？

这里注明:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction (尽管它的表述方式可以说是不透明的——我不确定他们为什么不只说 x 和 y 轴)