如何让文本与块对齐但居中对齐？

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