javascript - 文本不会对齐或移动

标签 javascript jquery css html

<body>
<div id="container">
    <div id="background"></div>
  <div id="dialog">
        <p>Hello there!</p>
    </div>
    <div id="button" onclick="showDialog()">
        <img src="images/images/sceond3.jpg" width="126" height="210" alt=""/>
    </div>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

var counter = 0;
function showDialog() {
    if (counter == 0) {
        $("#dialog p").html("Testing Second Line!");
    }
    if (counter == 1) {
        $("#dialog p").html("Testing Third Line!");
    }
    //increase counter by 1
    counter++;
}

</script>
</html>


body {
    line-height:0;
}

#container {
    float: left;
    height: 630px;
    width: 1155px;
}

#background {
    background-image: url(images/images/second1.jpg);
    float: left;
    height: 420px;
    width: 1155px;
}

#dialog {
    background-image: url(images/images/second2.jpg);
    z-index: 100;
    float: left;
    height: 210px;
    width: 1029px;
    left: 70px;
    top: 618px;
    font-size:25px;
}

您好,我在对齐和移动 HTML 代码中的文本时遇到问题。基本上,我的对话框 div 中有一些文本,但是,无论我在 CSS 中对该 div 做什么,文本似乎都不想移动或任何东西。

如果有任何帮助,我将不胜感激。谢谢。

最佳答案

对话框 div 是文本的容器。如果你想在容器内对齐文本本身,它位于“p”标签中,你需要将 css 应用于“#dialog p”。这将使您可以将其置于对话框 div 的中心。然后,您可以根据需要更改对话框 div 的宽度和位置。

#dialog p {
    text-align: center;
}

关于javascript - 文本不会对齐或移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34518261/

相关文章:

css - 框阴影对图像造成不利影响

html - 特定id下css选择器的简洁写法

javascript - requirejs 调用具有相同依赖关系的外部函数

javascript - 防止表单输入中出现双字节数字

javascript - 下拉菜单...带有 Bootstrap 的下拉菜单

javascript - 如何插入恒定值

javascript - 每 4 个 div 换行 - 错误行为

javascript - jQuery parent 有两个类

javascript - jQuery 隐藏 parent

javascript - CSS 过渡以在单击时将点分页移动到左/右