如何通过CSS工具实现垂直对齐图像

  • 原创
  • |
  • 浏览:140
  • |
  • 更新:

我们有的时候在网页上面不止放一个图像,这些图像要实现一些指定的对齐效果也可以通过CSS语句来实现的。

如何通过CSS工具实现垂直对齐图像

工具/原料

  • dreamwever

方法/步骤

  1. 1

    垂直对齐语句。要实现这样的一个对齐效果,你首先要找到一个相对应的CSS语句,这就是vertical-align:

    如何通过CSS工具实现垂直对齐图像
  2. 2

    类。对于不同的图像分成不同的类来执行不同的对齐效果,我们在语句方面可以体现为如下:

    img.top {vertical-align:text-top;}

    img.bottom {vertical-align:text-bottom;}

    如何通过CSS工具实现垂直对齐图像
  3. 3

    <style>语句给出完整的流程。

    <style>

    img.top {vertical-align:text-top;}

    img.bottom {vertical-align:text-bottom;}

    </style>

    如何通过CSS工具实现垂直对齐图像
  4. 4

    确定文字内容。这个网页主是文字与图像的对齐,我们就要指定一下文字的内容与图像的位置。

    如何通过CSS工具实现垂直对齐图像
  5. 4
    此文章非法爬取自百度经验
  6. 5

    多种对齐方式进行比较。为了更直观的表现对齐效果,我们设置了多种方式对齐来看效果。

    如何通过CSS工具实现垂直对齐图像
  7. 6

    设计窗口。我们回到设计窗口之后就可以看看这个设计效果的不同变化。

    如何通过CSS工具实现垂直对齐图像
    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部