[英]How to align text vertically with an image inside a <div>
我正在尝试在左侧有文字的同时在角落里有一个图像。 我的问题是文本在底部。 我已经尝试过垂直对齐和其他一些东西。 这是代码:
<div id="taskbar">
<div id="links">
<img src = "link"/> <!--Need a version where the white is not in the image. Should look nicer -->
<ul>
<li>Home</li>
<li>About</li>
<li>Jobs</li>
<li>Social</li>
<a href = "link"> <li>Blog</li> </a>
<li>FAQ</li>
<li>More</li>
</ul>
</div>
</div>
#taskbar
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
display: inline-block;
background-color: lightgrey;
}
ul
{
list-style-type: none;
text-align: right;
padding-left: 25px;
}
li
{
display: inline;
padding: 25px;
}
div img
{
padding-top: 5px;
padding-left: 5px;
height: 75px;
width: 75px;
}
a
{
text-decoration: none;
}
加上这个
ul {
list-style-type: none;
text-align: left; /* or right, which ever you want */
padding-left: 25px;
display: inline-block;
}
div img
{
display: inline-block;
}
我所做的就是将内联块添加到ul和图像中。
使用 Float:left
更新CSS Float:left
li
{
display: inline;
float:left;
padding: 25px;
}
div img
{
padding-top: 5px;
padding-left: 5px;
height: 75px;
width: 75px;
float:left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.