lua-text-overlay
and lua-center-text
is required to achive overlay effect (text on top of image).
To center text vertically and horizontally, lua-center-text
and .lua-center-text span
is required.
.lua-text-overlay { position: relative;}.lua-text-overlay .lua-center-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table;}.lua-text-overlay .lua-center-text span { display: table-cell; vertical-align: middle; text-align: center;}
<div class="lua-text-overlay"> <div class="lua-center-text"> <span>Center Text</span> </div> <img src="http://via.placeholder.com/150x150"></div>