Question

我添加了新的菜单分隔符，现在我的社交媒体图标的对齐方式已经不合时宜了。我需要他们居中。不知道为什么会这样或如何解决。我尝试添加一些CSS，但是没有运气。我的网站是http://www.stephensengineering.com/stephens33/，非常感谢您的帮助！：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Horizontal Navigation Bar w/Rollover Effect</title> 
<style type="text/css"> 
<!-- 

#navbar ul { 
  height: inherit;
  /* margin: 0; REMOVE THIS*/
  margin-bottom: 0; /* Suggested */
  list-style-type: none;
  text-align: right; 
  background-color: #000; 
} 

/* Suggested for aesthetic reasons */
#navbar {
  background-color: #000;
}

#navbar ul li  {  
    display: inline-block; 
    padding: 10px 4px;
  height: inherit;
    border-left: 1px  #696969;
}

#navbar ul li a { 
     font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
    border-left:1px solid #696969
/*     background-color: #000;  */
    } 

#navbar ul li:hover { 
    background-color: #000; 
    } 
#navbar ul li:hover a { 
    color: #fff !important; 
    } 
#navbar { background-color: #000; }
    #navbar{
    position: fixed;
    z-index: 100000; /*To bring the navbar to the top of the stacking context*/
    width: 100%;
    }
    nav.stricky-fixed.fadeInDown.animated{

   top:40px; /*Since this element is already set as relative in the original code,
              the top property places the slideIn menu 40px (height of black nav menu)
              from the top of the page.*/

  }

.social-icon-wrapper:nth-child(3) a {
    border-right: 1px solid #696969;
}
    .social-icon-wrapper:hover {
  background-color: transparent !important;
}
.social-icon {
  width: 15px;
  vertical-align: top;
}

 .submit-btn {
  background-color: green !important;
    padding: .2em 1em; 
    border-left:1px dashed #696969
  }
--> 
</style> 
</head> 
<body> 
<!--  -->
<div id="navbar"> 
  <ul class="container"> 
      <ul>
        <li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!--  --><li  class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!--  --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!--  --><li><a href="tel:+18883000642">888-300-0642</a></li><!--  --><li><a href="http://www.stephensengineering.com/stephens33/stephens-university/">Stephens University</a></li><!--  --><li class="submit-btn" ><a href="http://www.stephensengineering.com/stephens33/submit-assignment/">Submit Assignment</a></li> 
      </ul>

Answer 1

您可以将flex property与align-items进行水平对齐，将justify-content进行垂直对齐。

ul {
  background: #111;
  padding: 10px;
}

.social-icon {
  display: inline-block;
  height: inherit;
  border-left: 1px #696969;
}

.social-icon a {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold; /* you had this as text-decoration which doesn't have bold */
  padding: .2em 1em;
  color: #fff;
  border-left: 1px dashed #696969;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon:nth-child(3) a {
  border-right: 1px dashed #696969;
}

.social-icon img {
  width: 15px;
}

<ul>
  <li class="social-icon">
    <a href="#about">
      <img src="https://i.imgur.com/tonPA8V.png">
    </a>
  </li>
  <li class="social-icon">
    <a href="#about">
      <img src="https://i.imgur.com/fEvitJl.png">
    </a>
  </li>
  <li class="social-icon">
    <a href="#about">
      <img src="https://i.imgur.com/UiwMSrt.png">
    </a>
  </li>
</ul>

Answer 2

为了使图标居中显示，每个边框之间的距离需要等距。边框将应用到anchor标签的填充的左边缘，因此图标左侧有0.5em的填充，但是您忘记了list元素周围的填充，这将在之间添加4px图标和随后的边框，从而在右侧产生0.5em + 4px的填充。

签出您的#navbar ul li并将其填充更改为padding: 10px 0px，您会发现它开始调整。这不是完整的解决方案，因为我知道您希望在导航栏中添加下一组链接的填充。

在设置中，您需要考虑anchor标签的填充，列表元素的填充以及边框本身的宽度。最好将边框应用于navbar ul li而不是内部anchor元素。

尝试使社交媒体图标对齐，以便它们在分隔符之间完美居中

2 个答案: