css怎样才能让部分居中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css怎样才能让部分居中相关的知识,希望对你有一定的参考价值。
.mar,#mar
margin:0 auto;
width:100px;
我成定义了这种居中,可是他好像不能让部分居中,哪位高人帮忙解答一下啊
<!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=gb2312" />
<title>Universal vertical center with CSS</title>
<style>
bodymargin:0;
padding:0;
.greenBorder border: 1px solid green; /* just borders to see it */
.redBorder border: 1px solid red;
.blueBorder border: 1px solid blue;
#outer
display: table;
height: 400px;
width:500px;
#position: relative;
overflow: hidden;
#middle
#position: absolute;
#top: 50%;
#left:50%;
display:table-cell;
vertical-align:middle;
width:100%;
#inner
#position: relative;
#top: -50%;
#left:-50%;
text-align:center;
</style>
</head>
<body>
<div class="greenBorder" id="outer">
<div class="redBorder" id="middle">
<div class="blueBorder" id="inner">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered.
</div>
</div>
</div>
</body>
</html>
(活用了display属性,呵呵~~~) 参考技术B 如果 .mar 是外层div 那么情这样写:
.mar
margin:0 auto;
width:100px;
参考技术C text-align:center
怎样让div的内容水平垂直居中
水平居中直接给div加style="text-align: center"样式就可以实现;垂直居中html并没有给相应的方法,只能靠我们自己来配置,比如一个宽高都是
400px的div盒子,内置一个宽高都是200的div盒子,可以通过margin或者padding属性来调整
位置
<div style="width:400px;height:400px;text-align:center;background-color:red;">
<div style="width:200px;height:200px;background-color:green;
position:absolute;margin-left:100px;margin-top:100px;">
</div>
</div> 参考技术A center居中
以上是关于css怎样才能让部分居中的主要内容,如果未能解决你的问题,请参考以下文章