Question

我在<div>元素中有一个带有backgroundimage的网站，其中包含另一个<div>元素，其中包含文本。由于文本更改，我需要动态居中。到目前为止，我有这个，但仍然保持一致：

<html>
  <head>
    <title>3D Text</title>
<script> sets the text dynamically</script>
<style>

#Layer {
    width: 320px;
    height: 480px; 
    position: absolute; 
    border-style: none;
    top: 0px; 
    left: 0px;
    z-index: 0;
    }

#clock {
    position: relative;
    font-family: Helvetica Neue;
    color: black;
    font-size: 80px;
    text-align: center;
    opacity: 1;
    float: left;
}

.stretch {
    width:100%;
    height:100%;
} 




</style>

</head>

<body onload="onLoad()">

        <div id="Layer"><img src="bg2.png" class="stretch"/></div> 

            <div  id="clock">
                <script language="JavaScript">setText(); setInterval("setText()", 1000 )</script>
            </div>  

</body>
</html>

Answer 1

你的时钟div不在Layer div中。

试试这个：

<html>
  <head>
    <title>3D Text</title>
<script> sets the text dynamically</script>
<style>

#Layer {
    width: 320px;
    height: 480px;
    border-style: none;
    background-image: url(bg2.png);
    }

#clock {
    font-family: Helvetica Neue;
    color: black;
    font-size: 10px;
    text-align: center;
    opacity: 1;
}

.stretch {
    width:100%;
    height:100%;
}




</style>

</head>

<body onload="onLoad()">

        <div id="Layer">

            <div  id="clock">
              12:00PM
            </div>  
</div>
</body>
</html>

Answer 2

因为您使用的是float: left。浮动元素仅使用它所需的空间。

您必须在width上设置#clock属性才能使其正常工作。

Answer 3

我相信你必须为你的div设置宽度才能使文本对齐

使用CSS在背景图像内的中心文本

3 个答案: