在图像旁边对齐<ul>，在中间

Question

我左侧有一个<img>，旁边有一个<ul>，悬停图片比<ul>大得多，因此页面当前看起来像{{0} }

我的目标是将<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规则。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;