将文本居中放置在 flexbox 中的图像上

Posted 2023-03-05

【中文标题】将文本居中放置在 flexbox 中的图像上

【英文标题】：Center text over an image in flexbox

【发布时间】：2017-07-04 04:20:19

【问题描述】：

如何最好使用 FlexBox 将文本居中对齐到 <img>？

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>

【参考方案1】：

在图像上响应居中的文本内容

.height-100vh 
  height: 100vh;
  background: lightgrey;


.center-aligned 
  display: flex;
  align-items: center;
  justify-content: center;


.background-image 
  opacity: .3;
  width: 100%;
  object-fit:cover; 
  height: 100%;


.text 
  position: absolute;
  color: white;
  font-family:  'Gill Sans', 'Gill Sans MT';
  background: darkcyan;
  padding: 20px;

<section class="height-100vh center-aligned">
  <img class="background-image" src="https://www.humanesociety.org/sites/default/files/styles/768x326/public/2018/08/kitten-440379.jpg?h=f6a7b1af&itok=vU0J0uZR" />
  <div class="text">I'm in center</div>
</section>

【参考方案2】：

将文本居中放置在不需要 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 */

body 
  margin: 0px;


.height-100vh 
  height: 100vh;
  display: flex;           /* establish flex container */
  flex-direction: column;  /* stack flex items vertically */
  position: relative;      /* establish nearest positioned ancenstor for absolute positioning */


.text 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;


.center-aligned 
  display: flex;
  align-items: center;
  justify-content: center;

<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/revision/latest?cb=20090904155448" />
  <div class="text">SOME TEXT</div>
</section>

Revised Codepen

上面的代码使文本在图像上垂直和水平居中：

居中方法更详细的解释见：

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

【参考方案3】：

我又添加了 2 个 div

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

然后样式如下：

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

【讨论】：

该示例无法使用 OP 的初始代码库开箱即用。它还需要正确解释它为什么/如何工作。如果您确实更新，请通知我，我将删除我的反对票。

【参考方案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>

【参考方案5】：

我在 img 和 text 周围添加了另一个 wrapper div，并使用 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;

【讨论】：

这个答案对我有用，并有助于避免在我使用批准的答案时出现奇怪的文本换行问题

【参考方案6】：

你可以用relatively 定位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" >
  <p>Text Aligned Centrally Vertical &amp; Horizontal.</p>
</div>

现在<div> 是一个inline 有点你可以设置样式的元素。

预览：