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

イメージを払拭できます。これが私がすることです：

#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 に答える
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>

それがどのように見えるかを示すために、さらにいくつかのボールを追加しました. 400px x 400pxのコンテナーdivは、横10 個、下 10 個のボールを収容します。float:left は、単にボール divsをコピーして貼り付けるだけで確実にラップアラウンドします。

また、1 桁の場合は、改行なしのスペース (私が行った) または "0" (つまり、"4" ではなく "04") を追加して、2 桁の数字のように正しく中央揃えにする必要があります。

于 2013-08-09T02:24:05.957 に答える