Как я могу переопределить класс с помощью CSS?

Question

у меня <div id="SearchBox" name="Control" class="ms-floatLeft">.Класс заставляет поле SearchBox выравниваться по левому краю в div.

Есть ли способ выравнивания SearchBox по центру путем переопределения класса?Причина в том, что я не могу редактировать HTML напрямую, но с помощью ссылочной таблицы стилей я мог бы потенциально изменить выравнивание.

Я пытался:

div#SearchBox {
    width: 50%;
    margin: 0 auto;
} 

без успеха.Кроме того, важный не помогает, кажется, что класс всегда имеет преимущество.

Что я могу сделать здесь?

Answer 1

Я полагаю, поскольку применяемый класс называется ms-floatLeft, элемент имеет стиль float: left;.Добавьте float: none; к вашему #SearchBox

#SearchBox {
    width: 50%;
    margin: 0 auto;
    float: none;
}

Answer 2

Попробуйте сделать это следующим образом, это может быть не лучшим решением

div#SearchBox {
width: 50%;
margin: 0 auto;
align:center!important;

}

Answer 3

Класс ms-floatLeft, кажется, указывает на то, что элемент оставлен плавающим (на самом деле я только что подтвердил, посмотрев на CSS CSS).Отмените это свойство в переопределении:

#SearchBox {
    float: none;
    width: 50%;
    margin: 0 auto;
} 

Answer 4

Попробуйте внести изменения в класс ms-floatLeft, поскольку именно отсюда и исходят стили.

Если у этого класса также есть стили полей, они будут иметь приоритет над изменением полей, которое вы пытаетесь выполнить с вашей стороны.НО, если вы используете! Важное, ваши стили будут перезаписывать исходные стили.

.ms-floatLeft {
    width: 50% !important;
    margin: 0 auto !important;
} 

Стоит отметить, что! Важно не всегда рекомендуется, но если это сторонний CSS и у вас нет доступа кисходный файл CSS у вас может не быть выбора.