Wyrównywanie menu nagłówka na środku

Question

Mam problemy z centralnym wyrównywaniem całego kontenera menu oznaczonego żółtym kolorem na zrzucie ekranu.

"margin: auto" po prostu nie działa z jakiegoś powodu, którego jeszcze nie rozumiem. Kontener menu nadal pływa po lewej stronie.

Będę wdzięczny za twoją pomoc.

Zobacz pełne znaczniki i CSS poniżej:

body {
  margin: 0px;
}

.header-container {
  width: 100%;
  background-image: linear-gradient(to bottom, #008686, #024848);
}

.brand-logo {
  height: 60px;
  margin-left: 2%;
  margin-right: 3%;
  padding-top: 15px;
  padding-bottom: 15px;
}

.menu-container {
  width: fit-content;
  border: 3px solid yellow;
  margin: auto;
}

.brand-logo,
.menu-container {
  display: inline-block;
  vertical-align: middle;
}

.menu-item {
  padding: 5px 0px;
  margin-left: 30px;
}

.menu-item:hover {
  border-bottom: 3px solid #f8f143;
  border-radius: 2px;
  padding-bottom: 10px;
  transition: 0.1s;
}

.menu-icon {
  height: 40px;
  cursor: pointer;
  border: 1px solid red;
}

.menu-name-container {
  border: 1px solid red;
  margin-left: 5px;
  text-align: center;
}

.menu-name {
  font-family: Wendy One;
  font-size: 17px;
  color: #f8f143;
  text-decoration: none;
}

.menu-icon,
.menu-name-container {
  display: inline-block;
  vertical-align: middle;
}

.brand-logo,
.menu-item {
  display: inline-block;
  vertical-align: middle;
}

<header class="header-container">

    <a href=""><img src="buff.png" class="brand-logo"></img></a>

    <div class="menu-container">
        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 125px">
                <a href="" class="menu-name">Sports Betting Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 110px">
                <a href="" class="menu-name">Horse Racing Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 55px">
                <a href="" class="menu-name">Casino Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 60px">
                <a href="" class="menu-name">Betting Tools</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 80px">
                <a href="" class="menu-name">Betting Strategies</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 60px">
                <a href="" class="menu-name">Betting Tips</a>
            </div>
        </div>

        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 55px">
                <a href="" class="menu-name">News Corner</a>
            </div>
        </div>
    </div>
</header>

html css

1

370147 14 marzec 2020, 23:52

Answer 1

Aktualizuj

Aby wyrównać menu do środka całego wiersza, niezależnie od szerokości logo, należy je bezwzględnie ustawić, z .menu-container jako kontenerem względnym.

.header-container {
  …
  position: relative;
}

.menu-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

1

Andy Hoffman 14 marzec 2020, 21:19

Answer 2

@Andy, dokonałem jednej edycji w zasugerowanym kodzie i zadziałało, zobacz to poniżej:

.header-container{
    width: 100%;
    background-image: linear-gradient(to bottom, #008686, #024848);
    position: relative;
    box-sizing: border-box;
}

.brand-logo{
    height: 60px;
    margin-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.menu-container{
    width: fit-content;
    border: 3px solid yellow;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
}

Bardzo dziękuję za pomoc, dałeś mi pomysł, którego nie znałem :)

Ale teraz, kiedy najeżdżam na element menu, ten, który najeżdżam, pozostaje w tej samej pozycji, a pozostałe spadają o 10 pikseli. Chciałbym, aby element zawieszany podniósł się, a inne pozostały w tej samej pozycji.

Zobacz kod:

.header-container{
    width: 100%;
    background-image: linear-gradient(to bottom, #008686, #024848);
    position: relative;
    box-sizing: border-box;
}

.brand-logo{
    height: 60px;
    margin-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.menu-container{
    width: fit-content;
    border: 3px solid yellow;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
}

.brand-logo, .menu-container{
    display: inline-block;                                           
    vertical-align: middle; 
}

.menu-item{
    padding: 5px 0px;
    margin-left: 30px;

}

.menu-item:hover{
    border-bottom: 3px solid #F8F143;
    border-radius: 2px;
    padding-bottom: 10px;      
    transition: 0.1s;
}

1

370147 15 marzec 2020, 06:35

Wyrównywanie menu nagłówka na środku

2 odpowiedzi

Podobne pytania

Nowe pytania

html