zoukankan      html  css  js  c++  java
  • css+DIV里面是文字和图片居中对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置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>

    aliyun活动 https://www.aliyun.com/acts/limit-buy?userCode=re2o7acl
  • 相关阅读:
    iOS 后台运行
    内存管理
    ios -晋级之路 如何去掉tableView多余行的横线
    ios 晋级之路- block深入
    iOS 晋级之路- 调用相机和相册的功能
    iOS开发 --定位
    学习笔记 ios开发 手势
    排序法系列-快速排序法
    计算文本的高度BoundingRectWithSize:options:context
    NSClassFromString的用法
  • 原文地址:https://www.cnblogs.com/wangbin/p/2028718.html
Copyright © 2011-2022 走看看