Question

我使用了网络上的所有选项，但这似乎每次都在欺骗我。

u使用过的柔性

垂直对齐

我不想添加边距或填充。

您可以发表评论以开始讨论。

我只是在添加此bcox，以获取更多说明：

.topnav {
  
  overflow:hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  margin: 0px;
}


.topnav div {
  float: left;
  display: flex;
  color: #f2f2f2;
  font-size: 15px;
  margin:auto;
  text-align: center;
  padding-left: 10px;
  
}


.topnav div:hover {
  background-color: #ddd;
  color: black;
  margin:auto;
  position: relative;
  vertical-align: middle;
}

.topnav div.active{
   color:white;
   display:flex;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   margin:auto;
}

    <div class="topnav">
        <div class="active">Some Title</div>
        <div>Link</div>
        
    </div>

Answer 1

尝试一下

.topnav {
  
  overflow:hidden;
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  margin: 0px;
}


.topnav div {
  float: left;
  display: flex;
  color: #f2f2f2;
  font-size: 15px;
  margin:auto;
  padding-left: 10px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  
}


.topnav div:hover {
  background-color: #ddd;
  color: black;
  margin:auto;
  position: relative;
  vertical-align: middle;
}

.topnav div.active{
   color:white;
   display:flex;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   margin:auto;
}

    <div class="topnav">
        <div class="active">Some Title</div>
        <div>Link</div>
        
    </div>

Answer 2

只需使用display: inline-block, vertical-align: middle;并删除float:left

    .topnav {
      
      overflow:hidden;
      background-color: #333;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 5px;
      margin: 0px;
    }


    .topnav div {
      display: inline-block;
      color: #f2f2f2;
      font-size: 15px;
      margin:auto;
      text-align: center;
      padding-left: 10px;
      vertical-align: middle;
      
    }


    .topnav div:hover {
      background-color: #ddd;
      color: black;
      margin:auto;
      position: relative;
      vertical-align: middle;
    }

    .topnav div.active{
       color:white;
       display:inline-block;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 20px;
       margin:auto;
    }

        <div class="topnav">
            <div class="active">Some Title</div>
            <div>Link</div>
            
        </div>

文字未垂直居中对齐

2 个答案: