Home / Questions / 483887
Accepted
Richard Víquez Pérez
Asked: 2022-09-13 22:38:14 +0800 CST 2022-09-13 22:38:14 +0800 CST

如何使用 CSS 将 div 内的内容居中和/或对齐

  • 772

我无法让一些文本 在div.

我有以下CSS：

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

理论上，根据css代码，里面的段落div应该水平和垂直居中，但文本在顶部为我绘制。

也就是说，您不是垂直居中，而是水平居中。

html

2 Answers

  1. 要修复它，只需更改您在p父级中的样式

    div {
    display: grid;
    background-color: blue;
    justify-content: center;
    align-items: center;
    max-height: 200px;
    min-height: 200px;
    min-width: 100%;
    max-width: 100%;
}

div p {
    color: white;
    text-align: center;
}

    只有将p的这两个属性改为div，div的内容才会垂直居中。

    您必须记住，设置内容外观样式的人是容器，而不是内容。

    • 1
  2. Best Answer

    在div的样式中，必须替换“display:grid;” 通过“显示：弹性；” 在 p 元素的样式中，您应该添加以下两行： margin: 0 auto; 对齐自我：中心；

    • 0