0

我有一个简单的球图像，用作背景。我想覆盖文本。文本将是一个数字，即彩票号码。

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

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>

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

4

4 回答 4

0 
<!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>

我添加了几个球来向您展示它的外观。400 像素x 400像素的容器 div将容纳 10 个向下 10 个球。如果您简单地复制/粘贴球 divs，float:left确保它会环绕。

此外，对于个位数，您需要添加一个不间断空格（我做了）或一个“0”（即“04”而不是“4”），以确保它们像两位数一样正确居中。

于 2013-08-09T02:24:05.957 回答
0

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

<!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>
于 2013-08-09T01:31:07.217 回答
0

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

#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>
于 2013-08-09T01:48:08.533 回答
0

您可以设置#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/

于 2013-08-09T01:48:47.890 回答