<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,向下去一点点,高度上居中,网上搜了很多教程:
#center{
} 但是我用了之后更糟糕了,初步排查是 table-cell 这个样式造成的
感觉这个业务应该满大街都是的,说白了就是 bootstrap 的一个 row 下,有两个 col,我想让两个 col 在高度上都居中,谷歌了好久还是搞不定。在这里发帖一是想规避一下问题,第二也想了解一下机制
V2EX 前端的同学很多,感觉问题也比较简单,希望大家不吝赐教哈
1
whx20202 OP |
3
zhlssg 2018-01-06 03:19:39 +08:00
display: inline-flex;align-items: center;
|
4
zhlssg 2018-01-06 03:21:06 +08:00
再加上 justify-content: center;吧,最好能把代码放到 jsfiddle 或者 codepen,这样直观啊
|
5
lzvezr 2018-01-06 07:46:05 +08:00 via iPhone
V4 的话可以在 row 加.align-items-center,并且固定 row 的高度,看命名和 #3 应该差不多
|
6
jy02534655 2018-01-06 09:08:58 +08:00
高宽如果固定的话,只是物品类型这几个字可以通过指定内边距或者行高来居中
|
7
wzhndd2 2018-01-06 09:29:36 +08:00
我都是使用 transform 的 50%来做垂直居中,觉得你最好还是 jsfiddle 或者 codepen,这样好帮着你调试看
|
8
chotow 2018-01-06 09:32:27 +08:00
|
9
forestyuan 2018-01-06 10:12:39 +08:00
用 table 元素可以做到吧
|
10
jkeylu 2018-01-06 10:40:20 +08:00
|
11
gen900 2018-01-06 14:46:43 +08:00
flex 或者 margin-top 伪造一个剧中效果
|
12
Mystic0 2018-01-24 16:22:25 +08:00
用 line-height 让左侧文字居中就好了
|