[英]Center text on top of an image
我正在建立一个网站，我需要使图像中的文本居中。 我已经在CSS代码中尝试过margin，但是仍然无法正常工作。 我将这些图像用作文本的背景，因为它将简化动画，稍后再添加。 如果作为背景的图像不起作用，我总是可以找到解决方法。 我怎样才能做到这一点？ 我正在尝试的方法不起作用。
编辑：对不起，我忘了包括要尝试居中的文本是.IOStext （在CSS中）。 我正试图把它放在Moon中间。
我的代码：
@font-face { font-family: UDFont; src: url(gomarice_gogono_cocoa_mochi.ttf); } body { background-image: url(background.png); background-repeat: no-repeat; background-size: cover; background-color: #101423; min-width: 100%; min-height: 100%; font-family: 'UDFont', Impact, Helvetica, Arial, Sans-serif; } #header { width: 50%; margin: 100px auto; } #headerContent { width: 300px; margin: auto; } #mainTitle { width: 100%; margin: auto; text-align: center; } .universeTitle, .devTitle { font-size: 3em; margin: auto; text-align: center; } .universeTitle { color: #74aeee; } .devTitle { color: #f1ab3c; } .slogan { color: #822E81; text-align: center; margin: 10px auto; width: 100%; } #content { } #selectors { } #IOSselector { margin: auto; width: 300px; height: 300px; background-image: url(IOSMoon.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .IOStext { text-align: center; margin: auto; margin-top: auto; width: 100%; height: 50px; }
<!DOCTYPE html> <html> <head> <title>Welcome! | Universe Dev</title> <link rel="shortcut icon" type="image/png" href="icon.png"/> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="header"> <div id="headerContent"> <div class="mainTitle"> <span class="universeTitle">Universe </span><span class="devTitle">Dev</span> </div> <h3 class="slogan">Universal Development</h3> </div> </div> <div id="content"> <div id="selectors"> <div id="IOSselector"> <h1 class="IOStext">IOS</h1> </div> <script src="script.js"></script> </body> </html> <!-- END -->
您可以在“ moon”上使用flex，然后使您以内嵌文本形式输入文字：
#IOSselector { margin: auto; width: 300px; height: 300px; background-image: url(http://via.placeholder.com/300x300); background-size: cover; background-repeat: no-repeat; background-position: center; display:flex; justify-content: center; align-items: center; } .IOStext { margin: auto; margin-top: auto; display:inline-block; }
<div id="IOSselector"> <h1 class="IOStext">IOS</h1> </div>
使该图像位于文本的左侧，文本位于顶部还是居中？
[英]Make this image on the left of the text with the text on top or in the center?
在图像的中心或右上角输入文本，并继续以这种方式对齐文本
[英]Text to the center or top right of an image and continue to align the text this way
将所有内容居中于div的中间，在图像的顶部和底部放置文本
[英]Center everything in the middle of div, with text on top and on bottom of image
如何使用css响应性地在顶部中心位置图像上放置文本？
[英]how to place an text on the top center position image responsively using css?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.