We make a global navigator with HTML5 and CSS3.
I'd like to place global navigation text around the center of the top left image, but I'm not sure how to do it. If i understand, please tell me.
Currently, there is a global navigation around the top of the top left image.

I want to be in the center like the bottom.

Applicable source code
<! DOCTYPE html>
     <meta content = "en">
     <meta charset = "utf-8">
     <style type = "text/css">
         .globalnav ul li {
             list-style: none;
             width: 150px;
             float: left;
         .globalnav ul {
             margin: 0;
             padding: 0;
         li + li {
             border-left: 1px solid # 333;
         a {
             text-decoration: none;
                <li><img src = "newslogo.png" width = "100" height = "60"></li>
                <li><a href = "#">Sign in</a></li>
                <li><a href = "#">News</a></li>
                <li><a href = "#">Sport</a></li>
                <li><a href = "#">Weather</a></li>
                <li><a href = "#">i Player</a></li>
                <li><a href = "#">TV</a></li>
                <li><a href = "#">More</a></li>
Supplemental information (FW/tool version etc.)

OS: windows10
Browser: GoogleChrome
Editor: Brackets

  • Answer # 1

    . globalnav ul {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;

    How about it?

    Detailed explanation of how to use CSS Flexbox properties

    By the way,

    . globalnav ul li {
      list-style: none;/* Specified in the ul element * /
      width: 150px;
      float: left;/* not required if using flexbox * /

    list-style | MDN

    list-style-type | MDN


    . globalnav ul {
      flex-wrap: wrap;/* With line feed * /


    . globalnav ul li {
      flex: 0 0 150px;/* Extension: 0px, Deformation: 0px, Base: 150px * /

    You should also write

    For more details, please refer to the above "Detailed explanation of how to use each property of CSS Flexbox"