Question

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

所需的布局基本上是内容框左侧的关闭框。为实现此目的，close和content框各自驻留在自己的div中。这两个div是flex显示div的子项，左侧水平项对齐（justify-content: flex-start）和垂直对齐顶部（align-items:start）。该flex显示div是一般容器flex显示div的子代，具有左水平对齐和居中垂直对齐。（最外层）通用容器的尺寸以vw，vh（ - ＆gt; relative）给出。

请参阅以下代码。

但是，内部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

从你的问题中我理解的是你想要调整 <div class="content-control">...</div>垂直居中且水平左侧w.r.to父div <div class="content-area">...</div> 如果这是您正在寻找的内容，请更新您的CSS属性以获取课程'content-area'，如下所示：

.content-area {
justify-content: center;
align-item: left;
}

Answer 2

您正在使用flex-direction: column;，因此align-items: center;会影响子项的水平对齐（即水平居中），justify-content: flex-start;会影响儿童的垂直对齐。

将align-items: center;更改为align-items: flex-start;以防止出现所描述的不需要的水平居中。

Answer 3

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

这里需要注意的是：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction（虽然它的说法可以说是不透明的 - 我不确定他们为什么不说x和y轴）

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

3 个答案: