css中让文字和图片对齐的问题

html-css09

css中让文字和图片对齐的问题,第1张

img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所以会跟img处于同一行，想要img跟strong中的文字垂直居中对齐，需要设置img的vertical-align为middle。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：img {float: left}。

3、浏览器运行index.html页面，此时div标签中的左侧图片与右侧图片通过css调整为了浮动而顶部对齐了。

</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>

最终的图片