相关疑难解决方法(0)

在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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

25
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1