zoukankan      html  css  js  c++  java
  • 文字与图片混排效果

    第一种:对齐

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

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

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

    css+DIV里面是文字和图片居中对齐
    来源:http://hi.baidu.com/lxiangsheng/blog/item/7b53ce088cc4ce38e82488e7.html

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

    效果图如下:

    第二种:混排

    <div>
        <img src="http://www.google.com.hk/images/nav_logo8.png" style="float:left;" />
        设置各对象的vertical-align属性,属性说明:
    baseline-将支持valign特性的对象的内容与基线对齐
    sub-垂直对齐文本的下标
    super-垂直对齐文本的上标
    top-将支持valign特性的对象的内容与对象顶端对齐
    text-top-将支持valign特性的对象的文本与对象顶端对齐
    middle-将支持valign特性的对象的内容与对象中部对齐
    bottom-将支持valign特性的对象的文本与对象底端对齐
    text-bottom-将支持valign特性的对象的文本与对象顶端对齐<br />
    我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,
    像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文
    字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上
    角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样
        </div>

    效果:

  • 相关阅读:
    上门量体不能停,量品打造“一人一版”的私人定制衬衫,半年覆盖30个城市
    直击中小互联网企业痛点,程序员客栈推出短期雇佣功能
    现在,培训老师也有可能是你未来的 Boss
    【蓝领日志】捷库,给B端提供蓝领员工的标准化培训工具
    【调研】华图教育:领跑公职培训市场
    社区服务中心+护理员培训+云平台,中康行健“一体两翼”构建养老生态体系
    餐厅孵化器“优粮生活”,用孵化模式打造统一独立外卖品牌
    语培市场热度不减,“手韩”背后的垂直领域空间在哪?
    母基金_百度百科
    小编亲测杭州最火的海南鸡饭,最好吃的居然是……-搜狐吃喝!!!
  • 原文地址:https://www.cnblogs.com/wudingfeng/p/1797402.html
Copyright © 2011-2022 走看看