HTML - vertikale Ausrichtung in der Mitte

Ich versuche, eine Navigationsleiste für meine Website zu machen. Ich möchte die Höhe der Bar mit ihren Elementen verändern.HTML - vertikale Ausrichtung in der Mitte

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

meine ich versuchte Elemente vertikal in der Mitte mit dem 'align-vertical' tag auszurichten. Es funktioniert nicht.

Quelle

2017-03-07 float

Eine Möglichkeit, dies zu tun ist, padding zu verwenden, anstatt height auf den ul.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 50px 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

Ein anderer Weg, es flex zu verwenden.

ul { 
... 
    display: flex; 
    align-items: center; 
}

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
li { 
 
    float: left; 
 
    vertical-align: middle; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input { 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li><a class="active" href="#menu">Menu</a></li> 
 
    <li> 
 
    <form> 
 
     <input type="text" name="search" placeholder="Search.."> 
 
    </form> 
 
    </li> 
 
</ul>

Quelle

2017-03-07 16:36:46 sol

für Ihre Antwort Danke gegeben! Es klappt! Ich muss 10 Minuten warten, bis ich deine Antwort annehmen kann. – float

@float Froh, dass es geholfen hat – sol

Eine der einfachsten Möglichkeiten, Elemente vertikal zu zentrieren ist Flexbox zu verwenden. Hinzufügen:

display: flex; align-items: center;

auf die Stile auf Ihrem UL das li vertikal zentriert.

Quelle

2017-03-07 16:38:00

vertical-align Eigenschaft funktioniert nur mit display: inline-block. Sie können die flex nutzen, die jetzt breite Unterstützung hat.

Was ich tat - Hinzugefügt display: flex auf Container, der in diesem Fall ul ist. Fügen Sie auch align-contents hinzu, um es in der Mitte der Navbar zu machen.

Literaturhinweise - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     height: 100px; 
 
     display: flex; 
 
     align-items: center; 
 
    } 
 

 
    
 

 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     vertical-align:middle; 
 
     text-decoration: none; 
 

 
    } 
 

 
    li a:hover { 
 
     background-color: #111; 
 
    } 
 

 
    li form input{ 
 
     vertical-align:middle; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="lib/style.css" /> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li><a class="active" href="#menu">Menu</a></li> 
 
      <li> 
 
       <form> 
 
       <input type="text" name="search" placeholder="Search.."> 
 
       </form> 
 
      </li> 
 
     </ul> 
 

 
    </body> 
 
</html>

Quelle

2017-03-07 16:38:21

Geben Sie Ihrem li Element, line-height über 5px kleiner als die Höhe Ihres ul. Ich habe es line-height von 95px

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    height: 100px; 
 
} 
 

 
li { 
 
    float: left; 
 
    line-height: 95px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    vertical-align:middle; 
 
    text-decoration: none; 
 

 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 
li form input{ 
 
    vertical-align:middle; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" href="lib/style.css" /> 
 
</head> 
 
<body> 
 
    <ul> 
 
     <li><a class="active" href="#menu">Menu</a></li> 
 
     <li> 
 
      <form> 
 
      <input type="text" name="search" placeholder="Search.."> 
 
      </form> 
 
     </li> 
 
    </ul> 
 

 
</body> 
 
</html>

Quelle

2017-03-07 16:39:44 Yousaf

HTML - vertikale Ausrichtung in der Mitte

Antwort

Verwandte Themen