• 图片和文字对齐的方法


    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。

    方法一、

    设置各对象的vertical-align属性,属性说明:
    baseline-将支持valign特性的对象的内容与基线对齐
    sub-垂直对齐文本的下标
    super-垂直对齐文本的上标
    top-将支持valign特性的对象的内容与对象顶端对齐
    text-top-将支持valign特性的对象的文本与对象顶端对齐
    middle-将支持valign特性的对象的内容与对象中部对齐
    bottom-将支持valign特性的对象的文本与对象底端对齐
    text-bottom-将支持valign特性的对象的文本与对象顶端对齐

    在此设置为text-bottom即可实现图片与文字位于同一水平线上

    <div>
    <div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<img src="b-grade.png"></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div>
    <br>
    <div>文字与图片对齐方式<span style="vertical-align:top"><img src="b-grade.png"></span></div>
    </div>

    方法二、通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的

    我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点)

    解决问题最好的办法:.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的

    <img src="bottom.gif" style="margin-bottom:-3px">

    或者在样式里面设置

    img {
    margin-bottom:-3px;
    }

    这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

    方法三、

    li{
    margin: 0px;
    padding: 20px 3px 3px 8px;
    background: url(images/sohu_06.jpg) no-repeat 0 50%;
    list-style-type: none;
    list-style-position: inside;
    }
  • 相关阅读:
    泊松盘采样(Poisson Disk Sampling)生成均匀随机点
    JSON神器之jq使用指南指北
    SSH(sshd)终极安全加固指南
    rocketmq 搭建配置
    SQL 片段: select top 100
    安装netframework4.8 或 .net 4.6.2 时 弹出“已处理证书链,但是在不受信任提供程序信任的根证书中终止”错误的解决方法
    win7 离线安装 vs2019 出现闪退解决办法(非常实用)
    在win7 上安装 Visual Studio 2019 步骤 及 vs2019离线安装包
    VMware 宿主机与虚拟机之间 共享剪切板 失效问题
    安装netframework4.8弹出“已处理证书链,但是在不受信任提供程序信任的根证书中终止”错误的解决方法
  • 原文地址:https://www.cnblogs.com/OnlyDreams/p/4143312.html
Copyright © 2020-2023  润新知