css如何在li里让一个元素垂直居中？

0 0

css如何在li里让一个元素垂直居中？10

我有一个li元素，其中的元素都是要垂直居中的。看图：

红框中左侧和右侧的div需要垂直居中，可是在li里，中间的B使行高拉大了，左侧和右侧的div默认就靠底部对其了，现在要使他垂直居中或者靠顶端对其，该怎么办？

基本的html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<title>首页</title>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<style>
*{
	margin:0px;
	padding:0px;
}
body{
	padding:10px;
}
.line{
	width:100%;
	height:100%;
	border:1px solid #F00;
}
.left{
	width:50%;
 	background:#cce9ff;
	display:inline-block;
	position:relative;
}
.middle{
	width:25%;
 	background:#ffffff;
	display:inline-block;
	text-align:center;
}

.b0{
	margin:0px;
	padding:0px;
	text-align:left;
	background:#cce9ff;
}
.b1{
	text-align:center;
}
.b2{
	text-align:right;
	background:#69F;
}

.right{
	width:25%;
 	background:#cce9ff;
	display:inline-block;
	text-align:right;
}

</style>
</head>

<body>
<div data-role="page" id="page1">
	<div data-role="header">
         <h1>测试左中右结构</h1>
    </div>
	<div data-role="content">
    	<ul data-role="listview" data-inline="false" >
        <!--     
            <li style="background:#CFC;border:1px solid #F00;">
                <div class="line"><div class="left">A</div><div class="middle">B</div><div class="right">C</div></div>
            </li>
            -->
            <li style="background:#CFC;">
                <div class="line"><div class="left">我要垂直居中</div><div class="middle"><div class="b0">B0</div><div class="b1">B1</div><div class="b2">B2</div></div><div class="right">我要垂直居中</div>
                </div>
            </li>
           
        </ul>
    <div>
</div>


</body>
</html>

问题补充：PS:
不能使用top：-20px；一类的具体的数值使它看上去居中，必须自适应！

2014年7月22日 17:08

gundumw100
87
0 0 10

查看图片附件

1个答案按时间排序按投票排序

0 0

如果设置了高度可以通过line-height来控制垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<title>首页</title>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<style>
*{
	margin:0px;
	padding:0px;
}
body{
	padding:10px;
}
.line{
	width:100%;
	height:54px;;
	border:1px solid #F00;
        overflow: hidden;
}
.left{
	width:50%;
 	background:#cce9ff;
	display:inline-block;
        line-height:54px;
        float: left;
}
.middle{
	width:25%;
 	background:#ffffff;
	display:inline-block;
	text-align:center;
        float: left;
}

.b0{
	margin:0px;
	padding:0px;
	text-align:left;
	background:#cce9ff;
}
.b1{
	text-align:center;
}
.b2{
	text-align:right;
	background:#69F;
}

.right{
	width:25%;
 	background:#cce9ff;
	display:inline-block;
	text-align:right;
        line-height:54px;
        float: left;
}

</style>
</head>

<body>
<div data-role="page" id="page1">
	<div data-role="header">
         <h1>测试左中右结构</h1>
    </div>
	<div data-role="content">
    	<ul data-role="listview" data-inline="false" >
            <li style="background:#CFC;">
                <div class="line"><div class="left">我要垂直居中</div><div class="middle"><div class="b0">B0</div><div class="b1">B1</div><div class="b2">B2</div></div><div class="right">我要垂直居中</div>
                </div>
            </li>
           
        </ul>
    <div>
</div>


</body>
</html>

或者
vertical-align: middle;
display: inline-block;
但是这样也是需要高度

2014年7月22日 17:33