Как мне центрировать этот элемент на странице? Я могу центрировать текст только на цветном фоне - PullRequest
Новая
       18

Как мне центрировать этот элемент на странице? Я могу центрировать текст только на цветном фоне

0 голосов
/ 14 января 2019

Это создает именно то, что мне нужно, но я не могу центрировать весь элемент на странице. Центрирование будет центрировать текст только в пределах цветной области. Что я делаю не так?

Я пробовал много разных кодовых комбинаций, но не могу заставить это работать.

ВЫрастите свой бизнес с нами 
<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>

Я бы хотел, чтобы весь элемент выше был центрирован на странице.

Ответы [ 3 ]

0 голосов
/ 14 января 2019

вот пример 

.container{
    width: 100%;
    height: 100%;
    border: 1px red solid;
    display: inline-block;
    height: 90vw;

}

.container > div{
    width: 150px; /* very impotent */
    margin:auto;/* center position */
    border:1px #CCC solid;
    text-align:center;
}
<div class="container">
<div> center div </div>
</div>
0 голосов
/ 14 января 2019

Вы также можете просто изменить отображение атрибута на блокировку и добавить поле: авто! Я поместил его в div с шириной 1000px для просмотра, но вам просто нужно h1 

<div style="width:1000px;">

<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>

</div>
0 голосов
/ 14 января 2019

Вы можете добавить div вокруг H1 и добавить ширину и поле: auto like 

<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>

Или как Хуангизм делают 

<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>
...