Question

无法将图像置于中心位置，同时保持与我的图标处于同一水平位置。

HTML

<div class="smalltop w3-top">
  <span class="w3-opennav w3-xlarge" onclick="w3_open()"><i id="menui" class="material-icons w3-xxlarge">menu</i></span>
  <a href="#"><img id="smalllogo" src="img/navlogo-invert.jpg"></a>
</div>

CSS

#smalllogo {
  max-height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
  border: 5px solid;
  margin-top: 5px;
}

#menui {
  left: 0;
}

.smalltop {
  background-color: #FFF;
  list-style-type: none;
  margin: 0 auto;
}

https://jsfiddle.net/pzLbruhx/

Answer 1

为容器添加相对定位并将绝对定位添加到图标

#menui {
  left: 0;
  position:absolute;
}
.smalltop {
  background-color: #FFF;
  list-style-type: none;
  margin: 0 auto;
  position:relative;
}

<强> jsFiddle example

Answer 2

将属性float:left提供给#menui，然后查看结果

Answer 3

在图标

上使用display:table\table-row\table-cell和vertical-align

#smalllogo {
  max-height: 50px;
  width: auto;
  display: table-cell;
  margin: 0 auto;
  border: 5px solid black;
  margin-top: 5px;
}

.w3-opennav {
  display: table-cell;
  vertical-align: middle;
}

.smalltop {
  background-color: #FFF;
  list-style-type: none;
  margin: 0 auto;
  display: table-row;
}

Fiddle

如何将div中的元素居中，同时将其保持在与另一个元素相同的水平面上？

3 个答案: