首页 文章

如何在保持排成行的同时垂直和水平居中3个100x100px div

提问于
浏览 次
0

我用HTML和CSS编写了大约6个月的代码，我需要居中3个div，高度和宽度分别为100px和border-radius％100

html css html5 css3 position

3 回答

  • 0

    使用jquery你可以设置你想要的 .

    尝试这样的事情：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>

.wrap {
    text-align: center;
}
div div {width: 100px; height: 100px; background: #30353b; border-radius: 100%; display: inline-block;}

</style>
</head>
<body>

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>
<script type="text/javascript">

$(document).ready(function(){
    var windowH = $( document ).height();
    var divH = $('.wrap').height();
    var result = (windowH-divH)/2;

    $('.wrap').css({'margin-top':result});
})

</script>
</body>
</html>
    回复于
  • 1

    一种方法：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.wrap {text-align: center;}
div div {width: 100px; height: 100px; background: #30353b; border-radius: 100%; display: inline-block;}

</style>
</head>
<body>

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

    或者垂直居中......

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.wrap {display: table; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px;}
div div {width: 100px; height: 100px; background: #30353b; border-radius: 100%; display: inline-block;}

</style>
</head>
<body>

<div class="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>
    回复于
  • 0

    干得好：

    .wrap {
text-align: center;
position:absolute;
margin:auto;
left:0; right:0;
top:0; bottom:0;
width:100%;
height:100px;
display:block;
}

div div {width: 100px; 
height: 100px; 
background: #30353b; 
border-radius: 100%; 
display:inline-block;
}

    http://jsfiddle.net/drukaman/paohy1bc/

    回复于

相关问题