Как установить центральные элементы в теле, не центрируя все элементы в основных элементах? - PullRequest
Новая
       17

Как установить центральные элементы в теле, не центрируя все элементы в основных элементах?

0 голосов
/ 30 сентября 2019

Я пытаюсь установить выравнивание текста: по центру тела, чтобы мои элементы 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;
}

Ответы [ 2 ]

0 голосов
/ 30 сентября 2019 
body{
   text-align: center;
}

Это центрирует тело в коде css. Кроме того, с конкретными вещами, которые вы хотите центрировать, присвойте ему идентификатор <div id = "demo"></div> и замените тело в css идентификатором.

0 голосов
/ 30 сентября 2019

ваш код: 

.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 */
}

Комментарий, если он не работает:)

...