Question

我正在制作边栏，并且对CSS还是陌生的。我创建了一个div，代表一个封闭的侧边栏。应该只显示图标。不幸的是，根据图标的大小，图标以不对齐的方式进入div。我该如何解决？

.sidenav {
  height: 492px;
  width: 300px;
  background-color: #db3d44;
}

.data-icon {
  font-size: 45px;
  color: black;
  opacity: 0.5;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  color: white;
  margin-left: 10px;
  margin-top: 4px;
  font-size: 25px;
}

.hamburger:hover {
  color: black;
}

.sidenav-closed {
  width: 65px;
  float: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
  <button class="hamburger data-disappear">&#9776;</button>
  <div class="icons-only">
    <div class="data-icon">
      <i class="fa fa-home"></i>
    </div>
    <div class="data-icon">
      <i class="fa fa-car"></i>
    </div>
    <div class="data-icon">
      <i class="fa fa-home"></i>
    </div>
  </div>
</div>

此处的汽车图标未对齐。有什么解决方案？

Answer 1

您可以尝试将所有图标对准中心，以便您的.data-icon类如下所示：

@app.route('/teste2')
def teste2():
    teste=User(name='susan',email='susan@example.com')
    #u = User(name=request.args.get('1'), email=request.args.get('2'))
    return teste.name

Answer 2

您的div元素未在CSS中设置width和height-因此图标在它们内部严格对齐。

如果您想使它们垂直居中并学习新的用法，flexbox：

.icons-only { 
  display: flex;
  flex-direction: column;
  align-items: center; 
}

和

.data-icon {
   ...
   margin-left:0
}

您的汽车图标也比房屋大一点-您可以通过向其添加新类或使用以下图标来稍微改变其大小：

.data-icon:nth-child(2) {
  font-size: 40px;
}

此CSS代码将使用类别.data-icon的第二个（= 2）元素，并为其设置不同的字体大小

Answer 3

图标是嵌入式元素，因此默认情况下它们将保持对齐。另外，图标的大小不一样（这是正常现象），因此对齐不均匀。

要解决此问题，请将text-align: center添加到.icons-only。

注意：给定示例中的布局，似乎不需要将.data-icon浮动到左侧。

.sidenav {
  height: 492px;
  width: 300px;
  background-color: #db3d44;
}

.icons-only { 
  text-align: center;
}

.data-icon {
  color: rgba( 0, 0, 0, 0.5 );
  font-size: 45px;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  color: white;
  margin-left: 10px;
  margin-top: 4px;
  font-size: 25px;
}

.hamburger:hover {
  color: black;
}

.sidenav-closed {
  width: 65px;
  float: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
  <button class="hamburger data-disappear">&#9776;</button>
  <div class="icons-only">
    <div class="data-icon">
      <i class="fa fa-home"></i>
    </div>
    <div class="data-icon">
      <i class="fa fa-car"></i>
    </div>
    <div class="data-icon">
      <i class="fa fa-home"></i>
    </div>
  </div>
</div>

如何在div内严格保持图标对齐？

3 个答案: