Question

我有以下代码片段，我需要将文本对齐在框的中心。

如果可能的话，我应该使用flex，尽量避免使用text-align＆＃39;。

目前我正在使用justify-content：center;但没有结果。

知道怎么解决吗？是否只能使用flex？

＆＃13;

.div1
    {
    position: absolute;
    top: 7px;
    left: 103px;
    width: 631px;
    height: 590px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    z-index: 2;
    }
    
.div2
    {
    position: inherit;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
    transform: rotateZ(5deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1) scaleZ(1) translateX(0px) translateY(0px) translateZ(0px);
    backface-visibility: visible;
    border-radius: 4px;
    border-style: solid;
    border-width: 0px;
    background-color: rgb(250, 0, 136);
    border-color: rgb(0, 0, 0); opacity: 1;
    box-shadow: rgba(200, 0, 0, 0.498039) -64px 40px 56px 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    }

div3
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    letter-spacing: 0em;
    line-height: 1;
    padding: 0px;
    align-self: flex-start;
    word-wrap: break-word;
    }

＆＃13;

<div class="div1">
    <div class="div2">
        <div class="div3"><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>

＆＃13;

Answer 1

将display: flex; flex-direction: column; align-items: center;添加到内部div会使文本水平居中

＆＃13;

<div style="position: absolute; top: 7px; left: 103px; width: 631px; height: 590px; perspective: 1000px; perspective-origin: 50% 50%; z-index: 2;">
    <div style="position: inherit; top: 0px; left: 0px; width: inherit; height: inherit; transform: rotateZ(5deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1) scaleZ(1) translateX(0px) translateY(0px) translateZ(0px); backface-visibility: visible; border-radius: 4px; border-style: solid; border-width: 0px; background-color: rgb(250, 0, 136); border-color: rgb(0, 0, 0); opacity: 1; box-shadow: rgba(200, 0, 0, 0.498039) -64px 40px 56px 0px; overflow: hidden; display: flex; justify-content: center;">
        <div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: rgb(0, 0, 0); letter-spacing: 0em; line-height: 1; padding: 0px; align-self: flex-start; word-wrap: break-word; display: flex; flex-direction: column; align-items: center;"><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>

＆＃13;

Answer 2

只需将flex-direction:column添加到具有display:flex的元素即可。否则，它会尝试将alredy具有100％宽度的元素水平居中。

此外，为了将来参考，您应该尽可能简化代码示例。几乎所有的风格都与问题无关，并且难以解决。

＆＃13;

<div style="height: 590px">
    <div style="height: inherit; background-color: #fcc; display: flex; justify-content: center; flex-direction: column">
        <div style=""><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>

＆＃13;

Answer 3

<div class="wrapper">
<div>
<p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p>
</div>

       </div>

.wrapper{
      height: 590px;
    padding: 5px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

fiddler https://jsfiddle.net/Lbwv7wuh/1/

Flex使用justify-content

3 个答案: