中心在文本中Flexbox的图像

Question

我怎样才能居中对齐文本通过一个<img>最好使用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>

Answer 1

要居中在你不需要的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 */ 
} 

Revised Codepen

上述代码垂直和水平中心的文本在图像上：

对于定心方法的更详细的说明请参阅：

• Element will not stay centered, especially when re-sizing screen

Answer 2

你可以只用包装立法院relative定位inline-block<div>的图像，并给文字是这样的：

* {margin: 0; padding: 0; list-style: none;} 
 
.img-holder {position: relative; display: inline-block;} 
 
.img-holder img {display: block;} 
 
.img-holder p {position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); text-align: center; color: #fff; text-shadow: 0 0 15px;}

<div class="img-holder"> 
 
    <img src="http://bit.ly/1YrRsis" alt=""> 
 
    <p>Text Aligned Centrally Vertical &amp; Horizontal.</p> 
 
</div>

现在<div>是一个inline有点你可以风格的元素。

前瞻：

Answer 3

我已经添加了另一个wrapper格周围的IMG和文字，以及使用Flex来定位文本。看到这个codepen

HTML：

<section class="height-100vh center-aligned"> 
    <div class="wrapper"> 
    <img class="background-image" src="http://bit.ly/1YrRsis" /> 
    <div class="text">SOME TEXT</div> 
    </div> 
</section> 

CSS：

@import "bourbon"; 

body { 
    margin: 0px; 
} 

.height-100vh { 
    height: 100vh; 
} 

.center-aligned { 
    @include display(flex); 
    @include align-items(center); 
    @include justify-content(center); 
} 

.wrapper { 
    position: relative; 
} 

.text { 
    justify-content: center; 
    align-items: center; 
    display: flex; 
    color: #fff; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Answer 4

您还可以使用display: inline-block;将文本居中对齐图像到包装元素。

.height-100vh { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: #fff; 
 
}

<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>

Answer 5

我加入2-更多的div

<div class="text box" > 
    <img src="images/woodenbridge.jpg" alt="Wooden Bridge" /> 
    <div class="slide-box flex"> 
     <div class="flex-item"></div> 
    </div> 
</div> 

然后样式如下：

.flex-item { 
    display: inline; 
    align-self: center; 
}