Как выровнять заголовок сайта, используя CSS или jQuery

Question

Я использую код:

<script>

jQuery('div.io-title-description').attr('align', 'center');

</script>

<style>

div.io-title-description { text-align: center; }

div.io-title-description a:first-child { font-size: 36; font-weight: bold; text-transform: uppercase; color: #1E73BE; text-shadow: 0px 0px; text-decoration: none; }

</style>

для выравнивания заголовка моего сайта: https://news.softsolutionslimited.com

Код CSS устанавливает все остальные CSS свойства, кроме align в jQuery и CSS

Answer 1

Я проверил ваш сайт. И я сделал несколько изменений в классах:

.io-title-description {
    display: inline-block;
    margin: 17px 0;
    padding: 14px 0;
    float: none;
    width: 75%;             /* After width is given inline-block will align center */
    box-sizing: border-box; /* padding included inside width */
}
.socialmedia {
    float: right;
    padding: 7px 10px;
    text-align: right;
    width: 25%;
    margin-top: 30px;
    box-sizing: border-box;  /* Padding included */
}

Изменения, которые я сделал, добавили ширину к .io-title-description и border-box для них обоих. Поскольку я добавил ширину, элемент inline-block будет знать ширину линии, и если другого элемента нет, он будет выравнивать элементы по центру. border-box дает отступ для элемента, но отступ входит в ширину, т. Е. width всегда будет одинаковым (в данном случае 75%).

* Примечание: - Думаю, теперь вы этого не делаете необходимо добавить jquery, чтобы выровнять центр, как вы уже использовали где-то в родительском.