Question

我正在使用table方法将多个文本行集中在一个表格单元格中。但是，尽管关注了多个SO帖子和其他在线指南，但我无法将文本居中。

我想要的是将文本居中于divs背景的灰色部分内（请参见下图），然后在调整浏览器大小时，我希望它跨过div的整个宽度（但这是未来的问题）。现在，有人可以花点时间看我的CSS代码（也许是HTML代码设置），然后告诉我为什么它不居中吗？

HTML

<div id = "about">
    <div id = "header">
        <h3>About.</h3>
        <div id = "about-background">
            <div id = "about-text" class="left-grid">
                <p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
            </div>
        </div>
    </div>
</div>

CSS

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
    height: 525px;
    background: linear-gradient(90deg, #bbc6cb 50%, #ffffff 50%);
}

#about-text {
    font-family: Quicksand;
    font-size: 22px;
    line-height: 35px;
    font-weight: 300;
    width: 45%;
    display: table;
}

#about-text p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Answer 1

#about-text中的width属性导致文本仅显示在页面的45％处。将其删除并将背景长度增加到100％后，它将居中。

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
  margin: auto;
      background: linear-gradient(90deg, #bbc6cb 100%, #ffffff 100%);



}

#about-text {
    font-family: Quicksand;
    font-size: 22px;
    line-height: 35px;
    font-weight: 300;
    display: table;

}

#about-text p {
display: table-cell;
text-align: center;


}

<div id = "about">
    <div id = "header">
        <h3>About.</h3>
        <div id = "about-background">
            <div id = "about-text" class="left-grid">
                <p >Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
            </div>
        </div>
    </div>
</div>

Answer 2

#about #header {
    padding: 10px 0px;
    text-align: center;
    font-size: 36px;
}

#about-background {
    height: 525px;
    background: lightgrey;
    display: table;
}

#about-text {
    font-family: Quicksand;
    font-size: 18px;
    line-height: 35px;
    font-weight: 300;
    width: 45%;
    margin: 0 auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

<div id = "about">
    <div id = "header">
        <h3>About.</h3>
        <div id = "about-background">
            <div id = "about-text">
                <p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. </p>
            </div>
        </div>
    </div>
</div>

在表格单元格中将多行文本居中

2 个答案: