• 同行图片与文本居中对齐的CSS


    经常要将一行里面的图片和文本居中对齐,虽然查了很多资料走了很多弯路,从国外一家网站上看到了正确的解决方案,特放出来与大家共享。高手请无视。

    将图片对齐到文本底部——用法:

    该CSS代码将图片的底边与文本的底部对齐。 img

    首先你应该按照如下格式编写CSS样式文件的类(class):

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

    然后将该类应用到你要对齐的图片的属性上,例如(注意黑体部分):

    <img src="images/moreinfo.gif" width="90" height="14" border="0" class="textbottom" alt="portfolio more info tag">

    这样就可以将图片底部与文本底部对齐。该方法的核心是以该行的文本最为基准,然后调整图片的 CSS 样式,使之配合文本实现需要的对齐方式。

    其它图片位置 CSS 举例

    将文本与图片中部对齐

    如果这个效果不明显,请打开这个页面看看链接前的图标。

    水景一页 img

    样式:.textmiddle {vertical-align:middle;}

    将文字与图片顶部对齐

    水景一页 img

    样式:.texttop {vertical-align:top;}

    将文字与图片底部对齐

    水景一页 img

    样式:.textbaseline {vertical-align:baseline;}

    核心提示

    我之所以在这么简单的事情上走了弯路,是因为我不懂CSS,又遇上了写错了的文章。这些文章大部分都说将这样的css代码放在要对齐的行里。实际上应该像上面的例子那样,将这样的代码放在图片的CSS描述里。没错,代码都提到了,就是没有说明应该放在哪儿。

    怎么说呢,这难道是因为国内就没有CSS高手吗?肯定不是!但是使用中文搜索的结果,即使是排在第一的,都好像是直接从某个地方复制过来的,也许连看都没看过。很奇怪怎么会排在第一呢,Google也没有把功夫做到家。

  • 相关阅读:
    linux下netstat命令详解
    linux下strace命令详解
    /proc/uptime
    趣味理解网关、路由等概念
    OPENCV运行的问题,自带的程序可以运行,但是自己制作的QT报错
    第九章 MIZ702 ZYNQ片上ADC的使用
    第四章 MIZ701 ZYNQ制作UBOOT固化程序
    第三章 VIVADO 自定义IP 流水灯实验
    第一章 MIZ701 VIVADO 搭建SOC最小系统HelloWorld
    Zynq-7000 MiZ701 SOC硬件使用手册
  • 原文地址:https://www.cnblogs.com/jiji262/p/2324379.html
Copyright © 2020-2023  润新知