精华内容
参与话题
问答
  • baselineAligned 按照基线对齐

    千次阅读 2017-01-25 10:11:20
    baselineAligned 按照基线对齐

    liner_layout_2.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="vertical" >
        
        <!-- 
        	文本对齐方式
        	android:baselineAligned="false" 设置文本的对齐方式,默认为true,按照基线对齐 在同一个线性布局中的元素生效
        	android:baselineAlignedChildIndex="1" 设置需要被对齐的元素所在位置(从0开始)设置不同线性布局中元素的对齐位置
        -->
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
       
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HelloWorld"/>
         <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="HelloWorld"/>
    	 </LinearLayout>
    	 <LinearLayout 
    	     android:layout_width="match_parent"
    	     android:layout_height="wrap_content"
    	     android:baselineAlignedChildIndex="0"
    	     android:orientation="horizontal">
    	     <TextView 
    	         android:layout_width="wrap_content"
    	         android:layout_height="wrap_content"
    	         android:text="HelloWorld"/>
    	     <LinearLayout 
    	         android:layout_width="wrap_content"
    	         android:layout_height="wrap_content"
    	         android:baselineAlignedChildIndex="1"
    	         android:orientation="vertical">
    	         <ImageView
    	             android:layout_width="wrap_content"
    	             android:layout_height="wrap_content"
    	             android:src="@drawable/btn"/>
    	         <TextView 
    	             android:layout_width="wrap_content"
    	             android:layout_height="wrap_content"
    	             android:text="你好,世界"/>
    	     </LinearLayout>
    	     <LinearLayout 
    	         android:baselineAlignedChildIndex="2"
    	         android:layout_width="wrap_content"
    	         android:layout_height="wrap_content"
    	         android:orientation="vertical">
    	         <ImageView
    	             android:layout_width="wrap_content"
    	             android:layout_height="wrap_content"
    	             android:src="@drawable/btn"/>
    	          <ImageView
    	             android:layout_width="wrap_content"
    	             android:layout_height="wrap_content"
    	             android:src="@drawable/btn"/>
    	         <TextView 
    	             android:layout_width="wrap_content"
    	             android:layout_height="wrap_content"
    	             android:text="你好,世界"/>
    	     </LinearLayout>
    	     
    	 </LinearLayout>
    </LinearLayout>
    


    展开全文
  • css图片与字体对齐(基线对齐

    千次阅读 2020-03-05 17:39:51
    css图片与字体对齐(基线对齐) .collection image{ width: 13px; height: 13px; vertical-align: middle } .collection text{ font-size: 0.5rem }

    css图片与字体对齐(基线对齐)

    .collection image{
      width: 13px;
      height: 13px;
      vertical-align: middle
    }
    .collection text{
      font-size: 0.5rem
    }
    
    展开全文
  • CSS基线对齐的理解以及处理

    千次阅读 2020-06-22 09:02:21
    其实这是因为基线对齐的原因。 什么是基线对齐? 先让我们来看一张图片: 到这里我们的疑惑是不是少了一些?基线对齐其实就是指英文字母`i、n、s`这些字母的底部,它跟中文字符的底部的含义是不同的。 那我们再看...

    相信大家都会遇到同行不同盒子中文本的内容不能对齐的情况,而不知道这是为何?其实这是因为基线对齐的原因。

    什么是基线对齐?
    先让我们来看一张图片:
    在这里插入图片描述
    到这里我们的疑惑是不是少了一些?基线对齐其实就是指英文字母`a、i、n、s`这些字母的底部,它跟中文字符的底部的含义是不同的。

    那我们再看一下实测:

    <div class="box1">
        哈哈
      </div>
      <div class="box2">
        呵呵
      </div>
    
    <style>
        .box1 {
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: red;
          color: white;
          font-size: 48px;
        }
        
        .box2 {
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: blue;
          color: white;
          font-size: 16px;
        }
      </style>
    

    在这里插入图片描述
    这时候的对齐方式是没什么问题的(浏览器默认字符大小16px)
    再我先来改变一下字符的大小看看,将.box1的字符改为48px:

    .box1 {
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: red;
          color: white;
          font-size: 48px;
        }
    

    在这里插入图片描述
    可以看到两个盒子文本距离底线有明显的不同,那么更换下盒子字符看看?
    在这里插入图片描述

    这时候可以看到很明显的区别,这就是基线对齐。

    那我再来看看不改变文字大小,改变文字的行数看看:

    <div class="box1">
        哈哈哈哈哈哈哈哈哈哈哈哈
      </div>
      <div class="box2">
        呵呵
      </div>
    

    在这里插入图片描述
    这说明文字的基线对齐是相对于最后一行文字来说的!
    那对于这种情况,如果我们想自定义垂直方向上的对齐方式改怎样呢?
    在CSS中有个属性vertical-align是设置垂直方向上的对齐方式的,我们只需要在同一行的任一个选择器,或者父亲节点的样式上设置改属性就行。

    .box1 {
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: red;
          color: white;
          vertical-align: top;
        }
    

    在这里插入图片描述
    vertical-align可能的值的列表如下:
    在这里插入图片描述

    展开全文
  • Android中关于线性布局基线对齐

    千次阅读 2016-06-06 23:25:35
    线性布局及其子类布局中有基线对齐这个特性,即对所有能有基线(即getBaseline()返回正值)的View视图(一般多为TextView子类)默认采用基线对齐。 一般情况下它能很好的帮助我们对齐控件,显得很整洁,如下 ...

    线性布局及其子类布局中有基线对齐这个特性,即对所有能有基线(即getBaseline()返回正值)的View视图(一般多为TextView子类)默认采用基线对齐。

    一般情况下它能很好的帮助我们对齐控件,显得很整洁,如下

    可是当我们的文字是多行(或者两个控件之间的字体相差较多)的时候问题就出现了。

    可以发现莫名奇妙的不对齐了,甚至有一部分已经在父控件显示范围之外了。

    原因就是在于基线对齐。

    看这个大图,父控件自动帮我们进行了基线对齐,而基线对齐默认是对齐第一行文字,所以就出现了这种情况。

    至于怎么解决有两种方法,一种是为父控件增加 android:gravity="center_vertical"属性,这个属性一旦设置将会覆盖基线对齐的属性设置。

    另一种推荐的方法就是明确在父控件声明不需要进行基线对齐 在XML中通过android:baselineAligned="false"或在Java通过 setBaselineAligned(false)来设置。

    最终效果如下

    有网友从源码角度分析了这个问题,地址为:http://blog.csdn.net/bdmh/article/details/48495583

    展开全文
  • CSS中图片于文本的基线对齐设置

    千次阅读 2017-10-26 11:26:06
    文字旁边搭配图片时,发现图片比文字靠上,...baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将
  • AutoLayout baseLine基线对齐

    千次阅读 2015-08-05 23:14:05
    如何对多个view或者Button添加底部对齐顶部对齐等等类似的对齐约束呢?最简单的方法使用 storyboard,在后续的教程中将使用代码...(或者顶部对齐,左对齐,右对齐,基线baseLine对齐?) 首先说明一下对齐的实质: 顶部或
  • PS:下面的内容只是自己学习后进行知识梳理记忆所用的,并不全面,也可能理解有误,大家可以只参考上面链接...线性布局即其子类布局中有基线对齐这个特性,即对所有能有基线(即getBaseline()返回正值)的View视图(一...
  • 不知道大家看之前的内容是否还记得我之前写过对齐相关的知识的,当时根据版式设计的那本书的相关内容学习的,整体的排版啥的当时也没做好,对此深感抱歉,希望我们能继续一起学习相关的知识。我们今天主要从以下几...
  • 各种信息的空前增长产生了大量的网络,但存在的问题就是,不同网络中的相同用户彼此间的关联是不可知的,所以需要找到不同网络中同一用户的关联,也就是网络对齐。不同网络中已知的对应节点称之为锚节点,锚节点之间...
  • 默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐,接下来为大家详细介绍下设置各对象的vertical-align属性,感兴趣的朋友可以参考下哈
  • 作者易雪龙 转自Word联盟Word排版过程中,我们经常会遇到某些文字上下排列的时候无法对齐,看起来非常的别扭。那么,当我们遇到这种情况,应该如何解决呢?下面,易老师就来为大家分享几种常见文字无法对齐解决方案...
  • img的基线对齐问题

    2017-03-31 22:59:00
    http://blog.csdn.net/u011997156/article/details/44806523 转载于:https://www.cnblogs.com/BlogRegisterboby/p/6653974.html
  • 前几天做Android的时候碰到以前的开发人员挖的坑 这个页面是需要在一个主页上循环显示并填充数据展示的,当然,默认的这些看不出来问题,我们加点量 看到了吗,字数一朵就显示不出来了,原因呢,就是因为这个高度是给死的,...
  • konsole 字体基线对齐问题的解决

    千次阅读 2017-03-29 15:10:02
    安装 Kubuntu 16.04 LTS 后发现,KDE5 的终端程序 konsole 无论怎样设置,中文字体显示都有异常,会向下偏,很显然,是中文字体的基线与英文字体的相异造成的。解决办法其实很简单,设置为中文字体,问题解决。
  • 假设我需要实现将三个块级元素并排对齐的如下效果: 代码如下: 1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <style> 5 .container { 6 display: inline-block;...
  • 如何对多个view或者Button添加底部对齐顶部...(或者顶部对齐,左对齐,右对齐,基线baseLine对齐?) 首先说明一下对齐的实质: 顶部或者底部对齐: 本质上就确定了 一个视图的y坐标 左边或者右边对齐:本质上确定了一
  • 如图中问题: 一共有两种办法: 第一种:给每个红色盒子加 float: left; 但是会不占位置 第二种:给每个红色盒子加 vertical-align:middle; (middle表示把此元素放在父元素的中部) /* 第一种: */ ...
  • 一、先简单聊聊inline-block在html的元素中,主要有块级元素(block-level element)、行内元素/内联元素(inline-level element)和行内块元素。1、块级元素能够支持宽度和高度,并且默认占据一行,从而换行显示。...

空空如也

1 2 3 4 5 ... 20
收藏数 931
精华内容 372
关键字:

基线对齐