在图像中间将<ul>对齐
NOYOU454
我<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;
}
一个儿子
这对您有用吗？
如果仍然需要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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在div的中间对齐<ul>
- 2
使UL仅与图像居中对齐
- 3
CSS将UL与标题对齐
- 4
将img和ul列表对齐
- 5
将<ul> <li>元素向左对齐
- 6
将 ul 与固定 div 中的底部对齐
- 7
将文字左对齐，图像左对齐，中间对齐
- 8
图像未与中间对齐
- 9
图像未与中间对齐
- 10
无法与 Internet Explorer 的 ul 元素内的中心图像对齐
- 11
水平对齐<ul>标签
- 12
在不同的水平对齐UL
- 13
无法将ul li列表对齐到div的顶部
- 14
如何将ul列表对齐为中心的按钮
- 15
无法将ul li列表对齐到div的顶部
- 16
将 UL 垂直对齐到 div 的顶部
- 17
CSS中心对齐ul列表
- 18
水平<ul>菜单的居中对齐？
- 19
在ul上右对齐li
- 20
ul与CSS的动态居中对齐
- 21
在列内居中对齐 ul
- 22
居中 ul 但保持左对齐
- 23
ul中的ul不能垂直对齐ul
- 24
如何将 <ul> 中的多行文本不与项目符号点对齐，而是与上面的文本对齐？
- 25
将标题与图像对齐
- 26
JS图像滑块，中间垂直对齐
- 27
将最后一个li扩展到ul的剩余宽度并正确对齐
- 28
在UL和左对齐文本中，将具有更多li元素的li元素居中
- 29
将最后一个垂直 UL 子菜单与全尺寸页面的底部对齐
我来说两句