blocks|key|191594|text|另一种方法是将以下CSS添加到.headerText样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|191595|width:+100%25;
text-align:+center;
left:+0;|code-block|syntax|javascript|191596|希望这能有所帮助。|191597|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

An alternative is to add the following CSS to the .headerText style:

<pre><code>width: 100%;
text-align: center;
left: 0;
</code></pre>

Hope that helps.

blocks|key|918499|text|只需将span移到image标签之前，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|918500|<div+class="header">
++++<span+class="headerText">Ubytovna+Stavařov+Přerov´
++++<img+src="css/title578145459.png"+class="headerImage+left">
++++<img+src="css/title756941752.png"+class="headerImage+right">++++++++++++
</div>|code-block|syntax|javascript|918501|而你的页眉文本css需要|918502|.headerText+{
++++float:+left;
++++width:+100%25;
++++text-align:+center;
++++position:+absolute;
++++top:+40%25;
++++z-index:+1;
++++color:+yellow;
++++font:+bolder+6em+justus;
++++font-style:+oblique;
}|918503|这应该会成功的。|918504|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Just move the span before the image tags, like so:

<pre><code>&lt;div class="header"&gt;
 &lt;span class="headerText"&gt;Ubytovna Stavařov Přerov&lt;/span&gt;´
 &lt;img src="css/title578145459.png" class="headerImage left"&gt;
 &lt;img src="css/title756941752.png" class="headerImage right"&gt; 
&lt;/div&gt;
</code></pre>

and you header text css needs to be

<pre><code>.headerText {
 float: left;
 width: 100%;
 text-align: center;
 position: absolute;
 top: 40%;
 z-index: 1;
 color: yellow;
 font: bolder 6em justus;
 font-style: oblique;
}
</code></pre>

That should make it.

blocks|key|2314886|text|如果您可以将文本放在div或span中，那么您可以很容易地将它们对齐以居中。在挖掘的时候，你所需要的是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2314887|margin:+auto|code-block|syntax|javascript|2314888|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you can put the text in a div or span then you can easily align them to be centered. With the dig, all you meed is 

<pre><code>margin: auto
</code></pre>

blocks|key|5666859|text|这应该可以做到：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5666860|headerText:+{
++++position:+absolute;
++++top:+40%25;
++++left:+5%25;
++++margin:+auto;
}|code-block|syntax|javascript|5666861|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

That should do it:

<pre><code>headerText: {
 position: absolute;
 top: 40%;
 left: 5%;
 margin: auto;
}
</code></pre>

blocks|key|2314986|text|首先:应该去掉headerText后面的冒号。第二:我假设headerText是一个类选择器，所以您必须在headerText前面加上一个.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2314987|我建议将图像设置为background-image。然后，您可以执行以下操作：|2314988|.headerText+{
++++background-image:+url(path/to/your/image.png)
++++background-position:+center+center;
++++background-repeat:+no-repeat;
}|code-block|syntax|javascript|2314989|但这取决于你的图片是必须是页面内容的一部分，还是仅仅是设计/风格。这种解决方案只有在后一种情况下才有意义。|2314990|entityMap^0|7|A|T|A|1H|A|1X|1|0|9|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

First: the colon after <code>headerText</code> should be removed.
Second: I assume <code>headerText</code> is a class selector, so you have to prepend a <code>.</code> to <code>headerText</code>

I would recommend to set the image as <code>background-image</code>. Then you can do the following
Then:

<pre><code>.headerText {
 background-image: url(path/to/your/image.png)
 background-position: center center;
 background-repeat: no-repeat;
}
</code></pre>

But it depends on whether your image has to be part of the page's content or it is design/style only. This solution makes sense only in the latter case.

blocks|key|5666983|text|垂直居中的简单修复。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5666984|.headerText{
++position:absolute;
++top:0px;
++line-height:190px;
}|code-block|syntax|javascript|5666985|确保你修改了不同分辨率的高度，这取决于标题单词换行的位置-在大量行高换行的情况下看起来相当糟糕。|5666986|水平居中也很快：|5666987|.headerText{
++position:absolute;
++left:0px;
++right:0px;
++text-align:center;
}|5666988|现在一起来看：|5666989|.headerText{
++position:absolute;
++top:0px;
++left:0px;
++right:0px;
++line-height:190px;
++text-align:center;
}|5666990|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Simple fix for vertically centered.

<pre><code>.headerText{
 position:absolute;
 top:0px;
 line-height:190px;
}
</code></pre>

Make sure you modify the height for different resolutions, depending on where the header words wrap - looks pretty bad with massive line-height, wrapped.

Horizontally centered is pretty quick too:

<pre><code>.headerText{
 position:absolute;
 left:0px;
 right:0px;
 text-align:center;
}
</code></pre>

All together now:

<pre><code>.headerText{
 position:absolute;
 top:0px;
 left:0px;
 right:0px;
 line-height:190px;
 text-align:center;
}
</code></pre>

The title pretty much says it, I have a image which has a text on it. And I would like to keep it always centered, both horizontally and vertically. Now I am doing it with 

<pre><code>headerText: {
 position: absolute;
 top: 40%;
 left: 5%;
}
</code></pre>

but it doesn't seem to work for different resolutions. So is there other way how to achieve this layout?

<a href="http://stavarov-ubytovna.cz/index.html" rel="nofollow">Link</a> to the website (yellow header is the text I want to center)

How to center background text of image

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

标题说明了这一点，我有一张图片，上面有一个文本。我想让它始终居中，无论是水平还是垂直。现在我正在用headerText: {    position: absolute;    top: 40%;    left: 5%;}但它似乎不适用于不同的分辨率。那么，有没有其他方法来实现这种布局呢？网站的 (黄色标题是我要居中的文本)

问如何将图片的背景文本居中
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将图片的背景文本居中EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将图片的背景文本居中
EN