本文介绍了将文本中心放在flexbox中的图像上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用FlexBox将文本中心对齐到< img> ?
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="vignette2.wikia.nocookie/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" /> <div class="text">SOME TEXT</div> </section>
推荐答案
布局可以通过flexbox和定位属性来实现。没有对HTML的更改。
The layout can be achieved with flexbox and positioning properties. No changes to HTML.
.height-100vh { height: 100vh; display: flex; /* establish flex container */ flex-direction: column; /* stack flex items vertically */ position: relative; /* establish nearest positioned ancestor for absolute positioning */ } .text { position: absolute; left: 50%; /* horizontal alignment */ top: 50%; /* vertical alignment */ transform: translate(-50%, -50%); /* horizontal, vertical alignment fine tuning; explanation: stackoverflow/q/36817249 */ }修订的Codepen
上面的代码将文本的垂直和水平方向置于图片的中心:
The code above centers the text both vertically and horizontally over the image:
更多推荐
将文本中心放在flexbox中的图像上
发布评论