css怎样才能让部分居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css怎样才能让部分居中相关的知识,希望对你有一定的参考价值。

.mar,#mar
margin:0 auto;
width:100px;

我成定义了这种居中,可是他好像不能让部分居中,哪位高人帮忙解答一下啊

参考技术A 我不算高人啦,不过我这里有一段代码,应该可以帮到你!
<!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怎样才能让部分居中的主要内容,如果未能解决你的问题,请参考以下文章

css怎样让HTML中超出的内容显示为省略号

超出div部分的内容不显示怎么办

css怎样让整体居中?

怎样才能写出更好的 CSS?

css怎样让div里的表格居中对齐

css让div水平垂直居中