css-文字对齐问题 text-align: justify

1. text-align 默认 left 用的最多的是center, right比较少

2. 给大段的文字直接设置是没问题的. --如果你的文字只有一行, 是不生效的. 所以要利用下伪类(给伪类设置宽度100%).

3. 一个 text-align-last:justify; 可以搞定, 但是有兼容性问题.
   

    <style>
        p {
            width: 500px;
            text-align: justify;
        }

        .box {
            width: 500px;
            height: 20px;
        }

        .left {
            float: left;  /* 不设置浮动, 对不齐????*/
            width: 100px;
            height: 20px;
            overflow: hidden;
            text-align: justify;
            text-align-last:justify; 
            margin-right: 20px;
        }

        .left::after {
            content: '';
            display: inline-block;
            width: 100%;
        }

    style>
    <p>
        我不太记得我什么时候接触到极简的, maybe是16年, 记得看手机测评听过一句话: 玩极简肯定干不过苹果. 然后17年的时候就在扔扔扔了.18年的时候看了一部剧-我的家里空无一物, 瞬间被击中, 觉得这部剧就是为我拍的,
        对剧中理念无比认同.她扔的物品中, 就觉得沙发不该扔,其他的都觉得正常, 也震惊于她扔掉了谈恋爱的时候一直戴的戒指(因为有了结婚戒指)她的想法: 无论东西大小, 我只是讨厌无用的东西. 简直叹服.
        说实话她的一些做法稍微有点夸张, 比如纸巾都要放到柜子里,这样每次取用很不方便,厨具要摆放的分毫不差,而且还用一种洗洁剂洗头洗澡洗菜洗衣, 我受这个启发, 只能做到洗发水代替了沐浴露.
        很佩服女主整天收拾,我极简纯粹是因为懒.
    p>



    <div class="box">
        <div class="left">贷款金额div>
        <div class="right">10000元div>
    div>
    <div class="box">
        <div class="left">跟进人div>
        <div class="right">张三div>
    div>
    <div class="box">
        <div class="left">客 型div>
        <div class="right">A类div>
    div>

垂直对齐

div{
	height: 50px;
	line-height: 50px;
}
以为肯定水平对齐了, 可能因为上下不能均分(高度 - 文字高度 = 奇数). 不能对齐

还有如果设置了 box-sizing: border-box; 再设置行高,要再计算下内容区域高度(减去padding border) 

如果还不行, 还是用弹性盒吧, 给文字包一层span 行高等于文字高度
section {
	display: flex;
	align-items: center;
}