Question

我有一个简单的球形象，我用它作为背景。我想叠加文字。该文本将是一个数字，即彩票号码。

我尝试了各种方法但找不到解决方案，例如

CSS

#container {
  height:400px;
  width:400px;
  position:relative;
}

#image {    
  position:relative;
  left:0;
  top:0;
}
#text {
  position:absolute;    
  color:black;
  font-size:18px;
  font-weight:bold;
  text-align:center;
  top:0px;
}

HTML

<div id="container">
    <img id="image" src="http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"/>
    <p id="text">37</p>
</div>

我无法让数字在球中垂直和水平对齐。

Answer 1

我会改用背景图片。更可靠：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#container {
    height:400px;
    width:400px;
}

#text {
    margin: 0;
    color:black;
    font-size:18px;
    font-weight:bold;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background: url(http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif) no-repeat;
}

</style>
</head>
<body>

<div id="container">
    <p id="text">37</p> </div>
</pre>

</body>
</html>

Answer 2

你可以摆脱图像。这就是我要做的事情：

#container {
  background:url('http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif') no-repeat;
  height:400px; width:400px;
}
#text {
  color:#000; font-size:18px; font-weight:bold; text-align:center;
}

现在，你必须找出文字高度。公式为（#container。height / 2） - （#text。height / 2）。您应该使用JavaScript，例如：

//center.js
function E(e){
  return document.getElementById(e);
}
function center(innerElement){
  var e = innerElement, p = e.parentNode, ih, oh;
  if(window.getComputedStyle){
    ih = getComputedStyle(e).getPropertyValue('height');
    oh = getComputedStyle(p).getPropertyValue('height');
  }
  else{
    ih = e.currentStyle.height;
    oh = p.currentStyle.height;
  }
  e.style.margin = oh/2-ih/2+'px auto';
}

现在您的HTML可以包含：

<!--DOCTYPE and head with style here-->
<body>
  <div id='container'>
    <div id='text'>Line 1<br />Line 2</div>
  </div>
  <script type='text/javascript' src='center.js'></script>
  <script type='text/javascript'>
    center(E('text'));
  </script>
</body>
</html>

Answer 3

您可以将#image设置为绝对定位，并为容器设置固定宽度，#image以匹配图像大小，如下所示：

#container {
    height:40px;
    width:40px;
    position:relative;
}

#image {    
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    width:40px;
    height:40px;
}
#text {
    color:black;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:40px;
}

但我个人，我会将您的图片设置为元素的背景 - 这样您就可以消除一些HTML。

新HTML

<div id="ball">37</div>

新CSS

#ball{
    width:40px;
    height:40px;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:40px;
    background: transparent url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif") center center no-repeat;
}

http://jsfiddle.net/daCrosby/2WAAj/

Answer 4

<!DOCTYPE html>
<html>
<body>

<style>
#container
    {
    height:400px;
    width:400px;
    position:relative;
    }
#ball    
    {
    height:40px;
    width:40px;
    float:left;
    position:relative;
    background-image: url("http://www.powerball-lottery-blog.com/img/balls/ball_white_40.gif"); 
    }
#text
    {
    position:relative;    
    color:black;
    font-size:18px;
    font-weight:bold;    
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    padding:3px;
    }
</style>
<div id="container">
    <table>
        <tr>
            <td>
                <div id="ball">
                    <div id="text">   
                        <p id="text">37</p> 
                    </div>
                </div>
                <div id="ball">
                    <div id="text">   
                        <p id="text">&nbsp;3</p> 
                    </div> 
                </div>
                <div id="ball">
                    <div id="text">   
                        <p id="text">15</p> 
                    </div> 
                </div>
                <div id="ball">
                    <div id="text">   
                        <p id="text">17</p> 
                    </div> 
                </div>
                <div id="ball">
                    <div id="text">   
                        <p id="text">27</p> 
                    </div> 
                    </div>
                </td>
            <td>  
                    <img src="http://www.lotterynumbers.name/media/images/misc/its-a-rollover.png"  />
            </td>
        </tr>
    </table>
</div>
</body>
</html>

我添加了几个球来向你展示它的样子。 400px 400px 的容器div 将容纳10个球，10个以下。如果您只是复制/粘贴 ball divs ， float：left 可确保它会回绕。

此外，对于单个数字，您将需要添加一个不间断的空间（我做过）或一个＆＃34; 0＆＃34; （即＆＃34; 04＆＃34;而不是＆＃34; 4＆＃34;）以确保它们像两位数字一样正确居中。

如何在图像上垂直和水平对齐文本？

4 个答案: