Как центрировать фиксированный div по горизонтали, при этом ширина соответствует содержимому внутри - PullRequest
Новая
       55

Как центрировать фиксированный div по горизонтали, при этом ширина соответствует содержимому внутри

0 голосов
/ 11 июля 2020

Мне нужно, чтобы панель навигации на моем веб-сайте оставалась центрированной по горизонтали на странице при наличии свойства position: fixed;, и мне нужно, чтобы ширина всегда была такой же, как содержимое внутри div

Есть ли способ выполнить sh это?

Вот CSS, который у меня сейчас: 

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: fit-content;
    border-radius: 15px;
    position: fixed;
    top: 0;
    margin-left: 280px;
    z-index: 10;
}

Вот мой веб-сайт , если вам это нужно, чтобы увидеть, что мне нужно.

Ответы [ 3 ]

1 голос
/ 11 июля 2020

Удалить margin-left в коде.

Установить transform и left для горизонтального центра.

Изменить width на 100%. 

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
}
0 голосов
/ 11 июля 2020

Другой вариант - добавить вокруг элемента оболочку flexbox и зафиксировать его положение: 

.tab-wrapper {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    border: solid red 1px;
    overflow: hidden;
    z-index: 10;
}

.tab {
    padding: 0;
    border: solid blue 1px;
}
<div class='tab-wrapper'>
  <div class='tab'>
    Content
  </div>
</div>

Добавлены границы для визуальной ясности.

0 голосов
/ 11 июля 2020

Добавьте обертку вокруг вкладки 

<div class="tabwrapper">
    <div class="tab">
    </div>
</div>

<style>
.tabwrapper {
   position: fixed;
   width: 100%;
   text-align: center;
   top: 0;
}

.tab {
    margin: 0 auto;
    display: inline-block;
}
</style>
...