在flexbox中的圖像上居中文本如何將文本居中對齊<img>優(yōu)選使用FlexBox？body {
margin: 0px;}.height-100vh {
height: 100vh;}.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;}.background-image {
position: relative;}.text {
position: absolute;}<section class="height-100vh center-aligned">
<img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />
<div class="text">SOME TEXT</div></section>
3 回答
一只甜甜圈
TA貢獻1836條經(jīng)驗 獲得超5個贊
要將文本居中于圖像上，您不需要flexbox。只需使用CSS定位屬性。
.height-100vh {
height: 100vh;
position: relative; /* establish nearest positioned ancestor for
absolute positioning */}.text {
position: absolute;
left: 50%; /* horizontal alignment */
top: 50%; /* vertical alignment */
transform: translate(-50%, -50%); /* precise centering; see link below */}修改了Codepen
上面的代碼將文本在圖像上垂直和水平居中：
添加回答
舉報
0/150
提交
取消