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

对于我来说,容器div中的div既不能垂直居中,也不能左对齐。

所需的布局基本上是内容框左侧的闭合框。为了实现这一点,close和content box分别位于各自的div中。这两个div是具有左侧水平项目对齐的flex display 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

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