在 flexbox 中的图像上居中文本 [英] Center text over an image in flexbox

问题描述

如何最好使用 FlexBox 在 上居中对齐文本?

body {边距:0px；}.height-100vh {高度: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">一些文本</div></section>

解决方案

要将文本居中放置在不需要 flexbox 的图像上.只需使用 CSS 定位属性即可.

.height-100vh {高度:100vh；位置:相对；/* 建立最近的定位祖先绝对定位*/}.文本 {位置:绝对；左:50%；/* 水平对齐 */顶部:50%；/* 垂直对齐 */变换:翻译(-50%，-50%)；/* 精确居中；见下面的链接*/}

body {边距:0px；}.height-100vh {高度:100vh；显示:弹性；/* 建立弹性容器 */弹性方向:列；/* 垂直堆叠弹性项目 */位置:相对；/* 为绝对定位建立最近的定位祖先 */}.文本 {位置:绝对；左:50%；顶部:50%；变换:翻译(-50%，-50%)；白颜色;字体粗细:粗体；}.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">一些文本</div></section>

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

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

How can I centre align text over an <img> preferably using 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>

解决方案

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

.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

这篇关于在 flexbox 中的图像上居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！