Home>

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>
<html>
    <head>
     <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;
         }
    </style>
    </head>
    <body>
        <nav>
            <ul>
                <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>
            </ul>
        </nav>
    </body>
</html>
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

    And

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


    Then

    . 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"