如何在HTML中的图像上水平和垂直居中任意文本？ [英] How to horizontally and vertically center arbitary text over an image in HTML?
问题描述
我必须在用户可以输入字体大小的情况下渲染图片，因此我已经搜索了半个小时的SO并找不到答案。 ，图片尺寸和信息。该消息必须在图片上垂直和水平居中对齐。如果文本很短，但用户可以在URL中输入任何内容（例如）：
http：// localhost：8080 / app / slika？size = 16& dim = 100x200& msg = Java％20rulesfaekofakoefaeofae
后端由JSP和Java完成，下面是jsp文件的代码：
< body>
< div>
<％
int centerWidth =（Integer）request.getAttribute（width）/ 2;
int centerHeight =（Integer）request.getAttribute（height）/ 2;
％>
STYLE =position：absolute; left：<％= centerWidth / 2％> ;; top：<％= centerHeight％>;
text-align：center; font-size：$ {fontSize} px; width = 100％> $ {message}
< / span>
< / div>
你可以看到我有点硬编码它，所以对于短消息，显示效果会很好，但是很长时间它不会（因为文本会覆盖图像，它应该分成下一行）。
最后一句话是什么让我困扰，如何将文本分解成下一行？我设法调整它，但不能打破它。
实际上，您可以使用CSS来显示任何任意的文字任何图像的任意大小（无硬编码）。
.box {position：relative; float：left;}。text {width：100％; text-align：center;位置：绝对;左：0;顶部：50％; transform：translateY（-50％）; / *自定义* /颜色：红色; font-weight：bold; font-size：20px;}
< div class = 框 > < img src =https://placeimg.com/300/300/nature> < div class =text> Lorem Ipsum< / div>< / div>< div class =box> < img src =https://placeimg.com/300/300/nature> < div class =text> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin pretium non diam vel fermentum。< / div>< / div>
So I've searched through the SO for half an hour and couldn't find answer.
I have to render picture where user can dinamically enter the font size, picture dimension and message. That message has to be vertically and horizontally centrally aligned over the picutre. I just can't get it right, it would be ok if the text is short, but user can enter anything in URL (example):
http://localhost:8080/app/slika?size=16&dim=100x200&msg=Java%20rulesfaekofakoefaeofae
Back-end is done by JSP and Java, here is the code of jsp file:
<body>
<div>
<img src="fruits.png" width="${ width }" height="${ height }" style="vertical-align: middle">
<%
int centerWidth = (Integer) request.getAttribute("width") / 2;
int centerHeight = (Integer) request.getAttribute("height") / 2;
%>
<span
STYLE="position:absolute; left:<%= centerWidth/2 %>; top:<%=centerHeight %>;
text-align:center; font-size:${ fontSize }px; width=100%">${ message }
</span>
</div>
You can see that I "kinda" hardcoded it, so for short messages the display will be fine, but for long it won't (as the text will go over the image, and it should break into next line).
That last sentence is what is bothering me, how to break text into the next line? I managed to align it, but can't break it.
You can actually just use CSS to display any arbitary text over any arbitary size of image (without hardcoding).
.box {
position: relative;
float: left;
}
.text {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
/* Custom */
color: red;
font-weight: bold;
font-size: 20px;
}
<div class="box">
<img src="https://placeimg.com/300/300/nature">
<div class="text">Lorem Ipsum</div>
</div>
<div class="box">
<img src="https://placeimg.com/300/300/nature">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium non diam vel fermentum.</div>
</div>
这篇关于如何在HTML中的图像上水平和垂直居中任意文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
