个人中心
gpt4 book ai didi

html - 将一个 div 放在另一个 div 的中间

转载 作者：行者123 更新时间：2023-11-28 10:46:20 24 4
gpt4 key购买 nike

我想将加号放在下面的圆圈中间。现在我尝试使用 top 和 left 属性。这只适用于一台设备。当我在智能手机上查看页面时，所有内容都丢失了。所以我需要一个不使用 top 和 left 的方法 position 并且移动圆圈不会影响加号(它将保持在中心)。

我的代码:

<html>
<body>
    <div id="button"><div id="plus">+</div></div>
</body>

<style>

    #button
    {
        position : relative;
        width : 100px;
        height : 100px;
        border-radius : 100%;
        background-color : red;
    }

    #plus
    {
        display : inline-block;
        position : absolute;
        width : 50%;
        height : 50%;
        margin : auto;
        left : 5px;
        font-family : sans-serif;
        font-size : 40px;
        color : black;
        vertical-align : middle;
        text-alignment : center;    

    }
</style>

最佳答案

所有你需要的是离开和顶部是加号的 25%

<html>

<body>
  <div id="button">
    <div id="plus">+</div>
  </div>
</body>

<style>
  #button {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: red;
  }
  #plus {
    display: block;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-family: sans-serif;
    font-size: 40px;
    color: black;
    vertical-align: middle;
    text-align: center;
  }
</style>

</html>

关于html - 将一个 div 放在另一个 div 的中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26919379/

24 4 0
文章推荐： javascript - 监听外部 JavaScript 文件中的变量更改
文章推荐： css - 升级到 Polymer 0.5.1 和样式纸对话的问题
文章推荐： javascript - 如何在 javascript 中使用正则表达式引用所有变量名称
文章推荐： ios - CKShare "Server record changed"错误