div+css中 图片和文字对齐
width:422px;
height:180px;
border-bottom:1px dashed #96c5ef;
}
img{
border:2px solid #ca0000;
float:left;
}
.left{
float:left;
}
.right{
float:right;
width:230px;
font:12px;
}
</style>
</head>
<body>
<div id="content">
<div class="left">
<img src="images/1.jpg">
最新资讯
</div>
<div class="right">
<ul>
<li><a href="#">A股恐慌式跳水重挫3.68% 大盘跌回 </a></li>
<li><a href="#">股指缓慢企稳 黄金板块逆市上涨 </a></li>
<li><a href="#">港股后市堪忧 韩国股市暂停交易 </a></li>
<li><a href="#">中国万亿美债或面临缩水</a> </li>
<li><a href="#">日经指数收低</a> </li>
<li><a href="#">七国集团发联合声明称将保证金融 </a></li>
<li><a href="#">标普或再降美信用评级 </a></li>
</ul>
</div>
</div>
这个代码中 为什么最新资讯没有和图片垂直对齐？我该怎么gai?
你那不行，， 展开
</style>
#content
{
width:422px;
height:180px;
border-bottom:1px dashed #96c5ef;
}
img{
border:2px solid #ca0000;
float:left;
}
.left{
float:left;
vertical-align:middle;
}
.right{
float:right;
width:230px;
font:12px;
}
</style>
</head>
<body>
<div id="content">
<div class="left">
<img src="images/1.jpg"
<!--这里是我改动的地方-->
align="absmiddle">
<!--这里是我改动的地方-->
最新资讯
</div>
<div class="right">
<ul>
<li><a href="#">A股恐慌式跳水重挫3.68% 大盘跌回 </a></li>
<li><a href="#">股指缓慢企稳 黄金板块逆市上涨 </a></li>
<li><a href="#">港股后市堪忧 韩国股市暂停交易 </a></li>
<li><a href="#">中国万亿美债或面临缩水</a> </li>
<li><a href="#">日经指数收低</a> </li>
<li><a href="#">七国集团发联合声明称将保证金融 </a></li>
<li><a href="#">标普或再降美信用评级 </a></li>
</ul>
</div>
</div>
</body>
</html>
最终的图片
.left{float:left; height:36px; width:120px; line-height:36px;}
img{height:34px;width:34px; border:2px solid #ca0000;}用vertical-align根本不行。
想让文字上下居中最好的办法就是固定容器宽高，然后定义line-height
1、通过添加css的“vertical-align:middle;”；
2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；
3、把文字和图片分别放入不同的div中。
经过多次的测试，上面三种方法都可以让图片和文字在同一行显示，下面就用实例来为大家操作一下：
1、在css中给div添加上“vertical-align:middle”属性
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle；这样，它们在同一行就会垂直居中对齐了。
html代码如下：
<div id="cheshi">
<img src="cheshi.gif">
<img src="cheshi2.gif">
<a href="#">cheshi</a>
</div>
css代码如下:
#denglu *{
vertical-align:middle; /* 居中对齐， */
font-size:14px;
}使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，也是比较利于代码优化和精简的一种方法，希望大家可以掌握。
2、把图片设置为背景图片
如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了。
html代码如下：
<div id="cheshi">
<div id="cheshi1"><a href="#">测试</a></div>
</div>
css代码如下：
#cheshi{
background:url(cheshi.gif) no-repeat left center;
}
#cheshi1{
font-size:14px;
padding-left:50px;
}我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。
3、把文字和图片分别放入不同的div中
下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了。
html代码如下：
<div id="che">
<div id="shi"> <img src="cheshi.gif"/>
<div id="cheshi"><a href="#">测试</a></div>
</div>
css代码如下：
#cheshi{
font-size:14px;
margin-top:-16px;
padding-left:50px;
}
在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。
<img src="images/1.jpg">
<a href="#">A股恐慌式跳水重挫3.68% 大盘跌回 </a>
</li>
|
广告 您可能关注的内容 |
