zoukankan      html  css  js  c++  java
  • css中图片于文本的基线对齐与vertical-align属性设置

    css中图片于文本的基线对齐与vertical-align属性设置

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

    设置各对象的vertical-align属性,属性说明:

    baseline-将支持valign特性的对象的内容与基线对齐
    sub-垂直对齐文本的下标
    super-垂直对齐文本的上标
    top-将支持valign特性的对象的内容与对象顶端对齐
    text-top-将支持valign特性的对象的文本与对象顶端对齐
    middle-将支持valign特性的对象的内容与对象中部对齐
    bottom-将支持valign特性的对象的文本与对象底端对齐
    text-bottom-将支持valign特性的对象的文本与对象顶端对齐

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

    <span style="120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>

  • 相关阅读:
    PHP 8.0 带来的新特性
    do sth 之 提取了一份文档
    Java入门15---网络编程
    Java入门14---logback
    限流策略
    JConsole 可视化工具
    SpringBoot注解---6.声明式事务
    SpringBoot注解---5.AOP
    SpringBoot注解---4.扩展原理
    SpringBoot注解---2.组件赋值
  • 原文地址:https://www.cnblogs.com/xaun/p/13533641.html
Copyright © 2011-2022 走看看