垂直居中应用

来源：互联网发布：您的网络存在安全风险编辑：程序博客网时间：2024/06/14 17:16

近日在O2O移动电商手机页面时有个需求，就是一堆ul列表里面，有一个li的高度不确定，但是要求其他的li的高度，以它的高度垂直居中。
具体如下啊

<body><div class="div1">    <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>昆明北路旗舰店</li><li>夏款牛仔裤女</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道XXXX广场店</li><li>夏款牛仔裤男</li></ul>    <ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道与XXXX路XX大道XXXX路口广场店</li><li>夏款牛仔裤男</li></ul>    <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul> </div></body>

所有的数据都是从后台请求过来的，你会发现这个地址所在的li有的比较长有的比较短，所以它可能一行显示也可能多行显示，那么就会把这个所在的li的高度撑开，要求其他的li，都以这个li撑开的高度垂直居中。

垂直居中案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style>*{margin:0;padding: 0;list-style: none;}.div1{width:100%;font-size:24px;}.div1 ul{width:100%;border-bottom: 1px dashed #ccc;}.div1 ul li{    line-height: 40px;    display: inline-block;      width:25%;    vertical-align: middle;     text-align: center;}.div1 ul li:nth-child(3){    text-align: left;}</style></head><body><div class="div1">    <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>昆明北路旗舰店</li><li>夏款牛仔裤女</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道XXXX广场店</li><li>夏款牛仔裤男</li></ul>    <ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道与XXXX路XX大道XXXX路口广场店</li><li>夏款牛仔裤男</li></ul>    <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>      <ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul> </div></body></html>

暂不考虑自适应，想了解自适应的朋友请移步：
简单说说rem布局
自适应布局JQuery插件，rem布局
关于响应式布局的相关介绍

0 0