Question

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

Answer 1

你去：

.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/

Answer 2

一种方法：

<!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>

Answer 3

使用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>

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

3 个答案: