html - 将图像旁边的 居中对齐

Question

我有一个 <img>向左浮动，一个<ul>在它旁边，悬停图像比 <ul> 大得多因此该页面当前看起来像

我的目标是放置 <ul> '在图片中间，图片旁边 - 这是我的意思的一个例子:

这是我目前使用的代码:

HTML

 <img src="logo.png" style="height: 250px; width: 250px; float: left;" />
    <ul>
    <li>Example</li>
    </ul>

CSS

ul {
 background-image: url(ulbackground.png);
 list-style-type: none;
 background-repeat: no-repeat;
 height: 105px;
 width: 621px;
 vertical-align: middle;
 display: table-cell;
}

li {
 display : inline-block;
}

Answer 1

这对你有用吗？

如果您仍然需要 float: left，只需将其添加到 wrap 规则即可。

.wrap {
  display: table;
}

.wrap img {
  display: table-cell;
  vertical-align: middle;
}

ul {
  background-image: url(http://placehold.it/350x50);
  list-style-type: none;
  background-position: left center;
  background-repeat: no-repeat;
  height: 105px;
  width: 621px;
  vertical-align: middle;
  display: table-cell;
}

li {
  display : inline-block;
}

<div class="wrap">
  <img src="http://lorempixel.com/250/250" />
  <ul>
    <li>Example</li>
  </ul>
</div>