Vertically aligning a round list element hyperlink

1
votes

I have a header with 2 divs, the first one (floating to the left) is a simple horizontal unordered horizontal list, which is properly centered vertically (header has line-height the same as it's height and vertical-align: middle). The second div is floating to the right, and it also has a horizontal unordered list, however it has round (border-radius: 50%) hyperlinks and no text in them at all (they are going to be used as icons, with background-image). While the first div is aligned properly no matter what is the size of header, the second one stays at the top.

My code:

#header
{
  background-color: #a3a3a3;
  color: black;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

#header #icons
{
  float: right;
}

#header #icons ul
{
  margin: 0;
  padding: 0;
}

#header #icons ul li
{
  list-style-type: none;
  display: inline-block;
  float: right;
}

#header #icons ul li a
{
    display: inline-block;
    text-decoration: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #787878;
}

You can check the code & results here: https://jsfiddle.net/mf6yg78f/ How can I vertically align the round list elements? I'd prefer to stay away from any flexboxes etc.

2
csslistalignmentvertical-alignment

2 Answers

0
votes

Give margin-top: 7px; to #header #icons. There is no other option.

body
{
  margin: 0;
  padding: 0;
  background-color: black;
}

#wrapper
{
  width: 80%;
  background-color: white;
  margin: auto;
}

#header
{
  background-color: #a3a3a3;
  color: black;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}
#header #links
{
  float: left;
}

#header #links ul
{
  margin: 0;
  padding: 0;
}

#header #links ul li
{
	list-style-type: none;
	display: inline-block;
}

#header #links li:before
{
	content: " | ";
}

#header #links li:first-child:before
{
	content: none;
}

#header #links ul li a
{
	text-decoration: none;
	color: inherit;
}

#header #links ul li a:hover
{
  color: red;
}


#header #icons
{
  float: right;
  margin-top: 7px;
}
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
  margin: 0;
  padding: 0;
}

#header #icons ul li
{
  list-style-type: none;
	display: inline-block;
  float: right;
}

#header #icons ul li:first-child ~ li
{
	margin-right: 10px;
}

#header #icons ul li a
{
	display: inline-block;
	text-decoration: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: #787878;
}
<body>
<div id="wrapper">
  <div id="header">
  <div id="links">
      <ul>
        <li><a href="#">Index</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Gallery</a></li>
      </ul>
    </div>
    <div id="icons">
      <ul>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
      </ul>
    </div>
  </div>
</div>
</body>
0
votes

If you don't want to use flex, then try to display items as table and table cell so that it will behave as table. display:table-cell will make the element behave as <td> and so you can add vertical-align: middle to it effectively

try changing the following style to:

/* icons on the right side, should also be centered vertically */
#header #icons ul
{
  margin: 0;
  padding: 0;
  height: 50px;
  display: table;
  float: right;
}

#header #icons li
{
  list-style-type: none;
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  width: 35px;
  padding-right: 10px;
}

#header #icons ul li a
{
    display: block;
    text-decoration: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #787878;
    margin: auto 0;
    float: right;
}