CODEWITHSUNDEEP
htmlcss
Polygons
Polygons

Reputation: 124

How to center a list item inside a horizontal unordered list?

html/css newbie here.

I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.

I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.

Here's my code:

body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  padding: 13px 38px 0px 4px;
  margin-left: -8px;
}

#ka {
  display: inline-block;
}

#ka-logo {
  float: left;
  width: 24px;
  margin-left: auto;
  margin-right: auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}

#sign {
  float: right;
  margin-right: 44px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <ul class="navbar">
    <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
    <li id="search-bar" class="navbar-text">Search</li>
    <li><img id="search-icon" src="search.png"></li>
    <li>
      <div id="ka">
        <img id="ka-logo" src="leaf-green.svg">
        <div class="bold-signika">KHAN</div>
        <div class="signika">ACADEMY</div>
      </div>
    </li>
    <li id="sign" class="navbar-text">New user / Sign up</li>
  </ul>
</body>

</html>

I have seem this question but what was suggested didn't work for me.

My question is: how do I center the logo div?

A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.

Upvotes: 0

Views: 700

Answers (1)

Nepplot
Nepplot

Reputation: 118

here a solution for your problem.

In CSS, flex is very usefull, take a look at:

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

My CSS

I have used flexbox for centered verically divs and set the right div.

For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.

Enjoy

body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  
  display: flex;
  align-items:center;
  position:absolute;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  /**padding: 0 38px 0px 4px;**/
}

.logo {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

.logo-container {
  display:flex;
  align-items:center;
  pointer-events:all;
}

.logo-container .ka-logo {
  width: 24px;
}

.left, .right {
  display:flex;
  align-items:center;
}

.left {
  margin:0 10px;
}

.right {
  justify-content:right;
  margin:0 10px 0 auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="logo">
      <div class="logo-container">
          <img class="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
    </div>
    <div class="right">
      <li class="navbar-text">New user / Sign up</li>
    </div>
  </div>


  <!--<ul class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="center">
      <li>
        <div id="ka">
          <img id="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
      </li>
    </div>
    <div class="right">
      <li id="sign" class="navbar-text">New user / Sign up</li>
    </div>
  </ul>-->
</body>

</html>

Upvotes: 1

Related Questions