如何让div中的内容垂直居中

如何让div中的内容垂直居中,第1张

以下是让div中的内容垂直居中的具体 *** 作方法:

1、首先我们准备好一个空的html结构的文档。

2、接下来我们要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框。

3、接下来我们就在div中添加内容,如下图所示,运行后你会发现内容偏向于左上角。

4、下面我们给div设置水平居中,如下图所示,并且设置行高为div的高度,你会发现它水平垂直居中了。

通常我们用到的css布局都是左右居中,经典css写法如下:
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
margin:0
auto;
width:500px;
height:auto;
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
margin:0
auto;
width:500px;
height:auto;
}
上面是经典的左右居中的css写法,那么像登录框那些比较小得div块只是左右居中是否不是太美观,如果上下左右都居中这是
大多数网站的做法,下面是一个比较经典的div上下左右居中的css写法:
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/此时宽和高都要固定/
width:500px;
height:500px;
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
div{
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
/此时宽和高都要固定/
width:500px;
height:500px;
}
上面的margin可以合并:margin:-250px
0
0
-250px;
大概原理就是:布局需用position,绝对布局absolute还是相对布局relative得看父容器,top,left相对于顶部和左部都相距整个容器的50%,然后在利用margin,向上回退div高的50%即:margin-top:-250px
向左回退div宽的50%即:margin-left:-250px

设置行高等于你div的高度 <div style="height:30px; line-height:30px;">sdfsdf</div>
或者 内容向上偏移 <div style="height:30px; padding-top:10px;">sdfsdf</div>

<html>

<head>
<title>无标题文档</title>


<style type="text/css">
<!--
body{
 margin-top:0px;
 }
footer {
 height: 52px;
    width: 100%;
 background-color: #336600;
}
word {
 margin-top:18px;
    font-family: "黑体";
   font-size: 16px;
   color: #FFFFFF;
 }
-->
</style>
</head>

<body>
<div class="footer">
<div align="center" class="word">版权所有</div>
</div>
</body>
</html>

有两种方法:一种是直接用DIV里的“align”属性,另一种是为DIV设置“text-align”的样式,写法如下:
<div
align="center">文字居中</div>
<div
style="text-align:center">文字居中</div>
样式表的写法:div
{text-align:center}

由于div 是块级元素,在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。
设置文字的padding,使其达到居中的效果。、
在文字外层,div内包裹一个<p>标签,<div><p>只是一段文字</p></div>并将p标签的大小设置的与div标签同样大小。再对p标签应用vertical-align :middle属性。
具体如下:
div{ width:200px;height:200px; /设置div的大小/ border:1px solid green; /边框/ text-align: center; /文字水平居中对齐/ line-height: 200px; /设置文字行距等于div的高度/ overflow:hidden;}

上下居中··这个肯定就要用js算出来了···靠右对齐有很多种方法··position: fixed; right: 0;这样就靠右并且随滚动条滚动·一直固定在位置上···如果你是要做那种右下角的小窗口···纯css是不能解决问题的·


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13384398.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-25
下一篇 2023-07-25

发表评论

登录后才能评论

评论列表(0条)

保存