Html 如何在css中将文本定位在图像上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8708945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position text over an image in css
提问by Wern Ancheta
How do I center a text over an image in css?
如何将文本居中放置在 css 中的图像上？
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
I want to do something like the one below but I'm having difficulties, here's my current css
我想做类似下面的事情，但我遇到了困难，这是我当前的 css
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
When I use background-image I do not get any output from html2pdf:
当我使用背景图像时，我没有从 html2pdf 得到任何输出：
<style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>
Here's prints.php:
这是prints.php：
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
回答by xbonez
How about something like this: http://jsfiddle.net/EgLKV/3/
这样的事情怎么样：http: //jsfiddle.net/EgLKV/3/
Its done by using position:absoluteand z-indexto place the text over the image.
它通过使用position:absolute和z-index将文本放在图像上来完成。
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>回答by Ghost Echo
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don't want it centered then it's even easier, just work with the absoluteparameters. Keep in mind the main container is using display: inline-block. There are many others ways to do this, depending on what you're working on.
这是使用响应式尺寸的另一种方法。它将使您的文本居中并保持其在其父级中的位置。如果您不希望它居中，那就更容易了，只需使用absolute参数即可。请记住，主容器正在使用display: inline-block. 有许多其他方法可以做到这一点，具体取决于您在做什么。
Based off of Centering the Unknown
HTML
HTML
<div class="containerBox">
<div class="text-box">
<h4>Your Text is responsive and centered</h4>
</div>
<img class="img-responsive" src="http://placehold.it/900x100"/>
</div>
CSS
CSS
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
color: #FFF;
}
img {
display: block;
max-width: 100%;
height: auto;
}
回答by Harry Joy
Why not set sample.pngas background image of textor h2css class? This will give effect as you have written over an image.
为什么不设置sample.png为text或h2css 类的背景图像？这将产生您在图像上书写的效果。
回答by Kailas
For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.
对于响应式设计，最好使用具有相对布局的容器和具有固定布局的内容（放置在容器中）。
CSS Styles:
CSS 样式：
/*Centering element in a base container*/
.contianer-relative{
position: relative;
}
.content-center-text-absolute{
position: absolute;
text-align: center;
width: 100%;
height: 0%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 51;
}
HTML code:
HTML代码：
<!-- Have used ionic classes -->
<div class="row">
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
</div>
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
</div>
</div>
For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)
对于 IONIC Grid 布局、均匀间隔的网格元素和上述 HTML 中使用的类，请参阅 - Grid: Evenly Spaced Columns。希望能帮到你... :)
回答by Yevgeny Simkin
as Harry Joy points out, set the image as the div's background and then, if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div.
正如 Harry Joy 指出的那样，将图像设置为 div 的背景，然后，如果您只有一行文本，您可以将文本的行高设置为与 div 高度相同，这会将您的文本放在div 的中心。
If you have more than one line you'll want to set the display to be table-cell and vertical-alignment to middle.
如果您有多于一行，您需要将显示设置为表格单元格和垂直对齐到中间。
回答by Jim Schwetz
as of 2017 this is more responsive and worked for me. This is for putting text inside vs over, like a badge. instead of the number 8, I had a variable to pull data from a database.
截至 2017 年，这更具响应性并且对我有用。这是为了将文本放在里面 vs 上面，就像徽章一样。我有一个变量来从数据库中提取数据，而不是数字 8。
this code started with Kailas's answer up above
这段代码从上面的Kailas的回答开始
https://jsfiddle.net/jim54729/memmu2wb/3/
https://jsfiddle.net/jim54729/memmu2wb/3/
My HTML
我的 HTML
<div class="containerBox">
<img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
<div class='text-box'>
<p class='dataNumber'> 8 </p>
</div>
</div>
and my css:
和我的CSS：
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: 120px;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
回答by Amit Bisht
A small and short way of doing the same
做同样事情的小而短的方法
HTML
HTML
<div class="image">
<p>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
</p>
</div>
CSS
CSS
.image {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 300px;
color: white;
background: url('../../Images/myImg.jpg') no-repeat;
background-size: 250px 250px;
}
