文本在图像内居中答案

【问题标题】：Text centered inside the image文本在图像内居中
【发布时间】：2018-01-22 05:13:44
【问题描述】：

<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Product</span>
</div>

我需要这样，它也必须是响应能力。你能告诉我怎么做吗？

【问题讨论】：

所以你什么都没试过？
希望你能看到上面的js fiddle？ @贾斯蒂纳斯
重复 - stackoverflow.com/questions/40585920/div-with-text-over-image
文字为position: absolute或图片为背景
以所有可能的方式使用 CSS 居中的东西已经被讨论死了...css-tricks.com/centering-css-complete-guide, css-tricks.com/centering-in-the-unknown, ...

标签： html css image sass

【解决方案1】：

在此使用下面的代码，我已将行高设置为 div 高度，并且它也是响应式的

#imgContainer{
		background: url(https://placehold.it/60x60);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width: 100%;
		text-align: center;
	}
	#imgDesc{
		top: 50%;
        position: relative;
	}

<div id="imgContainer">
	  <span id="imgDesc">Works.</span>
	</div>

【讨论】：

【解决方案2】：

试试this

<div class="demo">
 <img style="vertical-align:middle" src="https://placehold.it/200x200">
 <span style="">Product</span>
</div>

css

.demo {
 width:200px;
 position:relative;
}
.demo span{
 position:absolute;
 left: 0;
 right: 0;
 top: 50%;
 text-align: center;
 margin: -9px auto 0;
}

【讨论】：

【解决方案3】：

一种方法是将文本设置为position: absolute;。另一种是将图片作为背景。

#sample-1 img {
  vertical-align: middle;
}

#sample-1 {
  position: relative;
  display: inline-block;
}

#sample-1 span {
  position: absolute;
  left: 5px;
  top: 20px;
}

#sample-2 {
  background-image: url('https://placehold.it/60x60');
  width: 60px;
  height: 60px;
  text-align: center;
}

#sample-2 span {
  line-height: 60px;
}

<div id="sample-1">
  <img src="https://placehold.it/60x60">
  <span>Product</span>
</div>

<div id="sample-2">
  <span>Product 2</span>
</div>

【讨论】：

【解决方案4】：

.image {
    position:relative;
}

.image img {
  width:300px;
}
.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 100px;
    width: 300px
}

<div class="image">
    <img src="https://placehold.it/60x60"/>
    <div class="text">
      Text
    </div>
</div>

【讨论】：

【解决方案5】：

以下是将为您执行此操作的代码。

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

只需将 background-image 属性放在 div 样式中即可。

【讨论】：

另外，此代码是从 w3schools 粘贴的。我正在粘贴它的链接：w3schools.com/css/tryit.asp?filename=trycss_align_container

【解决方案6】：

所以这个问题之前已经被问过很多次了，这里是我过去回答过的副本中的一个 sn-p。希望您可以在所示示例中使用自己的代码:)

div.counter {
    position: relative;
    display: inline-block;
}
div.counter span {
    position: absolute;    
    text-align: center;
    height: 100%;
    width: 100%;
}
div.counter span:before {
   display: inline-block;
   vertical-align: middle;
   height: 100%;
   content: '';
}

<div class="counter">
    <span>Product</span>
    <img src="http://placehold.it/60x60"/>
</div>

【讨论】：

请将对您帮助最大的答案选为正确答案：) 将帮助我们所有人！（希望是我的）@Sampath
你能告诉我为什么这行content: '';吗？
如果 content 属性没有设置为 'none' 或者像我写的那样，' ' - 伪元素，在这种情况下是 'Product' 文本，将不会生成。在此处阅读有关 content 属性的更多信息 :) sitepoint.com/understanding-css-content-property
如果文本不适合内容，您能告诉我如何自动中断文本吗？现在它不显示余额内容并尝试在一行上显示所有内容。有什么技巧吗？