テキストをどのようにしてブロックで中心合わせしますが、左に揃えますか？

Question

下の画像のように、flex property（「画像コンテンツ」テキストセンターをブロックに合わせて左揃えにしてください）

しかし、私は、私は（ブロックと"画像コンテンツ"テキスト整列センターが、画像のように左に揃える）必要がある。この

.wrapper { 
 
    max-width:300px; 
 
} 
 
.main { 
 
    width:300px; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-flow:column nowrap; 
 
    background:#458bc3; 
 
    color:#fff; 
 
    height:300px; 
 
    overflow:hidden; 
 
} 
 
.content { 
 
    color:#fff; 
 
    background:#a6d8ff; 
 
    height:100px; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-flow:column nowrap; 
 
} 
 
.content p { 
 
    margin:0px; 
 
}

<div class="wrapper"> 
 
    <div class="main"> 
 
    IMAGE 
 
    </div> 
 
    <div class="content"> 
 
    <p> 
 
     Image 
 
    </p> 
 
    <p> 
 
     Content 
 
    </p> 
 
    </div> 
 
</div>

を得ました。 誰もがフレックスでこのアプローチを得る方法を教えてくれますか？

Answer 1

だけtext-align: leftでdiv内のコンテンツimageとcontentパラさんをラップ：私は価値のある%とmargin-left、以下のようなものを持っていることを好むだろう。

このお試しください：

チェックデモhere

HTML：

<div class="wrapper"> 
    <div class="main"> 
    IMAGE 
    </div> 
    <div class="content"> 
    <div class="text-left"> 
     <p> 
     Image 
     </p> 
     <p> 
     Content 
     </p> 
    </div> 

    </div> 
</div> 

CSS：答えを

.wrapper { 
    max-width:300px; 
} 
.text-left { 
    text-align: left; 
} 
.main { 
    width:300px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    flex-flow:column nowrap; 
    background:#458bc3; 
    color:#fff; 
    height:300px; 
    overflow:hidden; 
} 
.content { 
    color:#fff; 
    background:#a6d8ff; 
    height:100px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    flex-flow:column nowrap; 
} 
.content p { 
    margin:0px; 
} 

Answer 2

align-items:center;は、flexのサブ要素をcenterに揃えて保持します。値をleftに変更すると一番左に揃えられます。ここでも、所望の出力を得るために<p>要素を調整する必要があります。

.wrapper { 
    max-width:300px; 
} 
.main { 
    width:300px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    flex-flow:column nowrap; 
    background:#458bc3; 
    color:#fff; 
    height:300px; 
    overflow:hidden; 
} 
.content { 
    color:#fff; 
    background:#a6d8ff; 
    height:100px; 
    display:flex; 
    justify-content:center; 
    align-items:left; 
    flex-flow:column nowrap; 
} 
.content p { 
    margin-left: 40%; 
}