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

Center text over an image in flexbox

提问by allegutta

How can I centre align text over an <img>preferably using FlexBox?

如何将文本居中对齐，<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>

回答by Michael Benjamin

To center text over an image you don't need flexbox. Just use CSS positioning properties.

要将文本居中放置在图像上，您不需要 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

修订代码笔

The code above centers the text both vertically and horizontally over the image:

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

For a more detailed explanation of the centering method see:

有关居中方法的更详细说明，请参阅：

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

• 元素不会保持居中，尤其是在调整屏幕大小时

回答by Praveen Kumar Purushothaman

You can just wrap an image with relatively positioned inline-block<div>and give the text this way:

您可以只用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" alt="">
  <p>Text Aligned Centrally Vertical &amp; Horizontal.</p>
</div>

Now the <div>is an inlinekinda element that you can style.

现在<div>是一种inline您可以设置样式的元素。

Preview:

预览：

回答by Alfie B

I've added another wrapperdiv surrounding the img and text as well as using flex to position the text. See this codepen

我wrapper在 img 和 text 周围添加了另一个div，并使用 flex 来定位文本。看到这个代码笔

HTML:

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:

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

回答by Anwar Hussain

You also can center align text onto an image using display: inline-block;to the wrapper element.

您还可以使用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>

回答by markst33

I added 2 more divs

我又添加了 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>

and then styled as follows :

然后样式如下：

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

回答by Vahid Akhtar

Responsive centered text content over image

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

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