如何讓文本與塊對齊但居中對齊？

Question

我想用css 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>

我需要（「圖像內容」文本對齊與塊中心，但左對齊像圖像）。 任何人都可以幫助我如何獲得這種方法與flex？

Answer 1

與text-align: left只是包裝您的內容image和content段的內div。

試試這個：

檢查演示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>元素來獲得你想要的輸出。我寧願margin-left與價值一些%，類似下面：

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