CSS如何让DIV里面的文字和DIV一样高?

这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="zairudonghua.css">
</head>
<body>
<div class="zairu">
<div class="zairu1"><p>L</p></div>
<div class="zairu2"><p>o</p></div>
<div class="zairu3"><p>a</p></div>
<div class="zairu4"><p>d</p></div>
<div class="zairu5"><p>i</p></div>
<div class="zairu6"><p>n</p></div>
<div class="zairu7"><p>g</p></div>
<div class="zairu8">.</div>
</div>
</body>
</html>

下面是CSS的:
@charset "utf-8";
/* CSS Document */
body {background-color: yellow}
/*定义网页背景色为黄色*/
.zairu{
margin:100px auto;
width:180px;
height:60px;
text-align:center;
font-size:10px;
}
.zairu > div {
background-color: cadetblue;
height:100px;
width:15px;
display:inline-block; /*此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。*/
-moz-animation: stretchdelay 1.2s infinite ease-in-out;/*-webkit-是代表safari、chrome私有属性*,其他的还有-moz-代表火狐 -ms-代表IE*/
animation: stretchdelay 1.2s infinite ease-in-out;/*等待1.2S开始动画,动画以低速开始低速结束,animation-delay定义动画何时开始以秒或毫秒计算*/
}
.zairu .zairu2 {
-moz-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.zairu .zairu3 {
-moz-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.zairu .zairu4 {
-moz-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.zairu .zairu5 {
-moz-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.zairu .zairu6 {
-moz-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.zairu .zairu7 {
-moz-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.zairu .zairu8 {
-moz-animation-delay: -0.5s;
animation-delay: -0.5s;
}

@-moz-keyframes stretchdelay {
0%, 40%, 100% { -moz-transform: scaleY(0.4) }
20% { -moz-transform: scaleY(1.0) }
}/*keyframes代表编辑动画效果 rtransform跟动画效果 scaleY表示2D缩放动画*/

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-moz-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-moz-transform: scaleY(1.0);
}
}
我做了个载入动画 我现在想要Loading的宽度高度和配套div的宽高一样?怎么设置,我直接设置<p></p>好像不行。是否还需要垂直居中?或者字体大小?有点迷糊 求解!!
另外 -moz-什么的特殊浏览器的定义 必须加上么?

你看是这个效果吗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {background-color: yellow}
/*定义网页背景色为黄色*/
.zairu{
margin:100px auto;
width:180px;
height:60px;
text-align:center;
font-size:10px;
}
.zairu > div {
background-color: cadetblue;
height:60px;
width:15px;
float: left;
display:inline-block; /*此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。*/
-moz-animation: stretchdelay 1.2s infinite ease-in-out;/*-webkit-是代表safari、chrome私有属性*,其他的还有-moz-代表火狐 -ms-代表IE*/
animation: stretchdelay 1.2s infinite ease-in-out;/*等待1.2S开始动画,动画以低速开始低速结束,animation-delay定义动画何时开始以秒或毫秒计算*/
}
.zairu .zairu2 {
-moz-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.zairu .zairu3 {
-moz-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.zairu .zairu4 {
-moz-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.zairu .zairu5 {
-moz-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.zairu .zairu6 {
-moz-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.zairu .zairu7 {
-moz-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.zairu .zairu8 {
-moz-animation-delay: -0.5s;
animation-delay: -0.5s;
}

@-moz-keyframes stretchdelay {
0%, 40%, 100% { -moz-transform: scaleY(0.4) }
20% { -moz-transform: scaleY(1.0) }
}/*keyframes代表编辑动画效果 rtransform跟动画效果 scaleY表示2D缩放动画*/

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-moz-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-moz-transform: scaleY(1.0);
}
}
</style>
</head>
<body>
<div class="zairu">
<div class="zairu1"><p>L</p></div>
<div class="zairu2"><p>o</p></div>
<div class="zairu3"><p>a</p></div>
<div class="zairu4"><p>d</p></div>
<div class="zairu5"><p>i</p></div>
<div class="zairu6"><p>n</p></div>
<div class="zairu7"><p>g</p></div>
<div class="zairu8">.</div>
</div>
</body>
</html>

追问

我的意思是说,让L o a d i n g变长一点~~~~就是DIV里面的文字。 最好高度占据整个DIV。
我不是设置了DIV高为60px了吗?我想让里面的字也做到60px的高度

追答.zairu > div {
background-color: cadetblue;
height:60px;
width:15px;
float: left;
    font-size: 70px;
    line-height: 10px;
display:inline-block; /*此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。*/
-moz-animation: stretchdelay 1.2s infinite ease-in-out;/*-webkit-是代表safari、chrome私有属性*,其他的还有-moz-代表火狐 -ms-代表IE*/
animation: stretchdelay 1.2s infinite ease-in-out;/*等待1.2S开始动画,动画以低速开始低速结束,animation-delay定义动画何时开始以秒或毫秒计算*/
}

把这段换下试试

温馨提示:答案为网友推荐,仅供参考
相似回答