Baron Alex Von Wilson Baron Alex Von Wilson - 2 months ago 9
CSS Question

Aligning two lists within a row in bootstrap

Now I know this is probably super simple, easy and obvious, but I've been banging my head for two days to try and figure this out. Googled up a storm.

I'm trying to align links within two lists at the bottom of a page to make a navbar. I'm using bootstrap and font awesome for icons. It seems as though the font awesome icons are larger than the font I'm using and causing misalignment.

You can see my problem here via codepen (its most noticeable in full screen mode or via a mobile device):

<http://codepen.io/alexwilson/pen/mAJqWX?editors=1100>


Here's the HTML:

<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="container-fluid">
<div class="row headline">
</div>

<div class="row">
<ul id="list-left">
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
<ul id="list-right">
<li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>


CSS:

body,
html,
.container-fluid {
height: 100%;
width: 100%;
margin: 0px !important;
padding: 0px !important;
}

.headline {
height: 94%;
background: url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.row {
margin-right: 0px !important;
}
.row a {
color: black;
}
.row a:link {
text-decoration: none;
}

.row a:visited {
text-decoration: none;
}

.row a:hover {
text-decoration: none;
color: gray;
}

.row a:active {
text-decoration: none;
}

.row ul {
text-align: center;
display: inline-block;
}

.row li {
display: inline-block;
}

#list-left {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}
#list-right {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}


In the bottom navbar I'm attempting to create, it looks like the icons on the right are placed higher than the text links on the left.

Keep in mind I want everything to be responsive which is why I've set the font-size to vh.

Does anyone have an idea on how I can make the left links be vertically aligned with the right icons?

I've tried setting font-size smaller for the icons than for the left links, I've tried making two columns of xs-6 in bootstrap, I've tried messing around with padding and margin for divs and for the ul's themselves and more. So far nothing has worked right.

Thanks in advance for any help.

Answer

Here you go. I threw some unnecessary stuff out hope this helps.

/*<!-- 
nest all nav?? 
color nav and links
make nav and links larger
make bg image slightly smaller
crop top of bg image to fit bottom
add padding to bg image
new font
larger nav
-->*/

body {
  background: url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.row {
  margin:0 !important;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 6vh;
  width: 100%;
  background: white;
}
.row a {
  color: black;
}
.row a:link {
  text-decoration: none;
}
.row a:visited {
  text-decoration: none;
}
.row a:hover {
  text-decoration: none;
  color: gray;
}
.row a:active {
  text-decoration: none;
}
.row ul {
  text-align: center;
  display: inline-block;
}
.row li {
  display: inline-block;
}
#list-left,
#list-right {
  font-size: 3vh;
  line-height: 6vh;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="https://use.fontawesome.com/383177a704.js"></script>
  <title>Alex Wilson - Man, Web Designer, Legend</title>
</head>

<body>
  <div class="row">
    <ul id="list-left">
      <li><a href="Home.html">Home</a>
      </li>
      <li><a href="About.html">About</a>
      </li>
      <li><a href="work.html">Work</a>
      </li>
    </ul>
    <ul id="list-right">
      <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      </li>
      <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
      </li>
      <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      </li>
      <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
      </li>
      <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
  </div>
  </div>
</body>

</html>