V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
whx20202
V2EX  ›  JavaScript

咨询一个垂直居中的问题,查了资料还是搞不定

  •  1
     
  •   whx20202 · 2018-01-06 03:00:32 +08:00 · 4316 次点击
    这是一个创建于 2515 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div class="container">
            <div class="container-fluid">
                <div id="searchArea">
                    <div id="searchCriteriaArea">
                        <div class="row" style="">
                            <div class="col-md-1" style="display: inline-block;">
                                物品类型
                            </div>
                            <div class="col-md-4">
                                <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
                                    <option value="0">苹果</option>
                                    <option value="1">菠萝</option>
                                    <option value="2">香蕉</option>
                                    <option value="3">火龙果</option>
                                    <option value="4">梨子</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="searchTable">
                    </div>
                </div>
            </div>
        </div>
    

    代码比较简单,现在问题是: class="row"的这个 DIV,高度是自动生成的 34。它的下面有 2 个 col 的 DIV,第一个高度是 20,但是是向上对齐的,第二个高度是 34,撑满了父元素。 这样就很难看了

    我想让第一个 col,向下去一点点,高度上居中,网上搜了很多教程:

    1. 好像我这个是“父元素高度未知”,因此很多手段不能用
    2. 有个教程是这样的: #container{ display:table-cell; text-align:center; vertical-align:middle; }

    #center{

    } 但是我用了之后更糟糕了,初步排查是 table-cell 这个样式造成的

    感觉这个业务应该满大街都是的,说白了就是 bootstrap 的一个 row 下,有两个 col,我想让两个 col 在高度上都居中,谷歌了好久还是搞不定。在这里发帖一是想规避一下问题,第二也想了解一下机制

    V2EX 前端的同学很多,感觉问题也比较简单,希望大家不吝赐教哈

    第 1 条附言  ·  2018-01-24 16:27:12 +08:00
    谢谢大家,10L 的方法是可以用的

    我最后直接用了 layUI 这里也算打个广告把,官方哪里有很多例子,直接抄就行了
    对于我这种后端程序员,我写前端只是显示数据(换句话说什么都可以换,不用遵从什么设计文档)
    这个库是最方便的
    12 条回复    2018-01-24 16:22:25 +08:00
    whx20202
        1
    whx20202  
    OP
       2018-01-06 03:00:38 +08:00
    whx20202
        2
    whx20202  
    OP
       2018-01-06 03:05:31 +08:00
    @whx20202 如图所示,这个物品类型,明显和右边的 selector 对不齐
    zhlssg
        3
    zhlssg  
       2018-01-06 03:19:39 +08:00
    display: inline-flex;align-items: center;
    zhlssg
        4
    zhlssg  
       2018-01-06 03:21:06 +08:00
    再加上 justify-content: center;吧,最好能把代码放到 jsfiddle 或者 codepen,这样直观啊
    lzvezr
        5
    lzvezr  
       2018-01-06 07:46:05 +08:00 via iPhone
    V4 的话可以在 row 加.align-items-center,并且固定 row 的高度,看命名和 #3 应该差不多
    jy02534655
        6
    jy02534655  
       2018-01-06 09:08:58 +08:00
    高宽如果固定的话,只是物品类型这几个字可以通过指定内边距或者行高来居中
    wzhndd2
        7
    wzhndd2  
       2018-01-06 09:29:36 +08:00
    我都是使用 transform 的 50%来做垂直居中,觉得你最好还是 jsfiddle 或者 codepen,这样好帮着你调试看
    chotow
        8
    chotow  
       2018-01-06 09:32:27 +08:00
    参考: https://www.zhihu.com/question/20543196
    我用的是 before 伪元素法。
    不考虑兼容性的话,建议用 flex 布局,超方便。
    forestyuan
        9
    forestyuan  
       2018-01-06 10:12:39 +08:00
    用 table 元素可以做到吧
    jkeylu
        10
    jkeylu  
       2018-01-06 10:40:20 +08:00
    gen900
        11
    gen900  
       2018-01-06 14:46:43 +08:00
    flex 或者 margin-top 伪造一个剧中效果
    Mystic0
        12
    Mystic0  
       2018-01-24 16:22:25 +08:00
    用 line-height 让左侧文字居中就好了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4774 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:05 · PVG 18:05 · LAX 02:05 · JFK 05:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.