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

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

  •  1
     
  •   whx20202 · 108 天前 · 1422 次点击
    这是一个创建于 108 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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 条附言  ·  89 天前
    谢谢大家,10L 的方法是可以用的

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