时间戳

首页 > 解决方案 > 在 a 中居中文本

防止移动

javascript - 在 a 中居中文本
防止移动

问题描述

我想水平和垂直居中a<p></p>可以由一条或多条线组成，在 a 中<div></div>。只有父母的宽度和高度是已知的。注意：我将 div 称为父级，将 p 称为子级。

我在这里和其他网站上看到，为了进行垂直居中，最好的方法是display: table在父元素上使用并与子元素display: table-cell结合使用vertical-align: middle。

但是，我需要 div 的 style.top 和 style.left 稍后被一些 javascript 覆盖，以使其移动。通过使用表格技巧，它以某种方式阻止了我移动父级，至少以这种方式。请注意，当 div 移动时，孩子必须保持居中。

TL;博士：

如何使 div 中的文本居中，然后仍然可以移动 div？

我的 html 正文：

<div id="target">
    <p>Centered?</p>
</div>

我的 CSS

    div {
        outline: 1px solid white;
        background-color: #FF9F00;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        
        /* how to center its child? */
    }
    p {  
        font-family: Arial;
    }

我的 javascript 移动方式：

var target = document.getElementById("target");
target.addEventListener('mousemove', function (event) {
    target.style.left = event.x + "px";
    target.style.top = event.y + "px";
});

标签： javascripthtmlcss

解决方案

使用 flexbox 怎么样？

div {
  display:flex;
  flex-direction:column;
  justify-content: center;
  text-align:center;
}

<div><p>I want this paragraph to be at the center, but it's not.</p></div>

推荐阅读