V2EX 首页   注册   登录
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 · 18 天前 · 1102 次点击
    <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 前端的同学很多,感觉问题也比较简单,希望大家不吝赐教哈

    11 回复  |  直到 2018-01-06 14:46:43 +08:00
        1
    whx20202   18 天前
        2
    whx20202   18 天前
    @whx20202 如图所示,这个物品类型,明显和右边的 selector 对不齐
        3
    zhlssg   18 天前
    display: inline-flex;align-items: center;
        4
    zhlssg   18 天前
    再加上 justify-content: center;吧,最好能把代码放到 jsfiddle 或者 codepen,这样直观啊
        5
    lzvezr   18 天前 via iPhone
    V4 的话可以在 row 加.align-items-center,并且固定 row 的高度,看命名和 #3 应该差不多
        6
    jy02534655   18 天前
    高宽如果固定的话,只是物品类型这几个字可以通过指定内边距或者行高来居中
        7
    wzhndd2   18 天前
    我都是使用 transform 的 50%来做垂直居中,觉得你最好还是 jsfiddle 或者 codepen,这样好帮着你调试看
        8
    chotow   18 天前
    参考: https://www.zhihu.com/question/20543196
    我用的是 before 伪元素法。
    不考虑兼容性的话,建议用 flex 布局,超方便。
        9
    forestyuan   18 天前
    用 table 元素可以做到吧
        10
    jkeylu   18 天前
        11
    gen900   18 天前
    flex 或者 margin-top 伪造一个剧中效果
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2951 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 59ms · UTC 07:41 · PVG 15:41 · LAX 23:41 · JFK 02:41
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1