如何在主体中设置居中元素而不将主要元素中的所有元素居中？

Question

我正在尝试将 text-align: center 设置为 body 以使我的 div 正常工作，但这样会使我页面中所有文本居中。如何将文本对齐设置为正文，以便它只影响正文和其中的 div，而不影响 div 中的所有内容？

HTML:

<body>
<div class="leftColumn"><!--stuff--></div>
<div class="centerColumn"><!--stuff--></div>
<div class="rightColumn"><!--stuff--></div>
</body>

CSS:

.leftColumn, .centerColumn, .rightColumn {
    margin: 16px;
    border: 2px solid var(--medium) !important;
    background-color: white !important;
    margin-top: 98px !important;
    display: inline-block;
}

.leftColumn, rightColumn {
    width: 300px;
}

.centerColumn{
    min-width: 900px;
    margin: auto; /* This doesn't center the center column so I'm trying to use text-align to center this. */
}

.rightColumn {
    float: right;
    right: 16px;
}

Answer 1

您的代码：

.leftColumn, .centerColumn, .rightColumn {
    margin: 16px;
    border: 2px solid var(--medium) !important;
    background-color: white !important;
    margin-top: 98px !important;
    display: inline-block;
}

解决方案：

.leftColumn, .centerColumn, .rightColumn {
    margin: 16px;
    border: 2px solid var(--medium) !important;
    background-color: white !important;
    margin-top: 98px !important;
    display: inline-block;
    text-align: left; /* setting alignment inside */
}

加上：

body{
   text-align: center; /*  setting alignment outside */
}

如果它不起作用请评论:)

Answer 2

body{
   text-align: center;
}

这将使正文在 css 代码中居中。此外，对于您想要居中的特定内容，为其指定一个 ID <div id = "demo"></div> 并将 css 中的正文替换为该 ID。

如何在主体中设置居中元素而不将主要元素中的所有元素居中？

How to set center elements in body without centering all elements within main elements?

html

css

center

text-align