无法水平对齐左，中/右DIV

Question

I have this HTML: 我有这个HTML：

<html>
<head>
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<div class="container">
    <div class="left">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
    <div class="center">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
    <div class="right">
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
        <a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
    </div>
</div>
</body>
</html>

And this CSS: 而这个CSS：

.grezzo{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
width: 200px;
padding: 30px 30px 30px 30px;
background: grey;
text-align:center;
color: white;
box-shadow: 15px 15px 10px black;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
}
.grezzo:hover {
-webkit-border-radius: 40px 30px 40px 30px;
-moz-border-radius: 40px 30px 40px 30px;
border-radius: 40px 30px 40px 30px;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
background: darkblue;
}

.nolinea {
text-decoration: none;
}
.left{
float: left;
width: 500px;
}
.center{
margin:0 auto;
width: 100%;
}

.right{
float: right;
width: 500px;

}
.container{
width: 100%;
}

This is the like to jsfiddle . 就像jsfiddle一样。

My problem is: I want to have my 3 menus left/center/right, like a table, but not using it. 我的问题是：我想让我的3个菜单左/中/右，像一张桌子，但不使用它。 How can I place them like this? 我该如何放置它们？

Answer 1

You can either use the CSS display types for tables, or you can float all three menus (.left, .center, .right) left , setting suitable widths on them. 您可以使用CSS显示类型的表，也可以浮动所有三个菜单（。左，.center，.right） 离开了 ，他们设定合适的宽度。 You're mixing pixels widths and percentage widths, which is probably going to cause you problems, but if you do the following: 您正在混合像素宽度和百分比宽度，这可能会引起问题，但是如果执行以下操作：

.left, .center, .right {
    float: left;
    width: 33%;
}

you'll at least see the beginnings of what you want. 您至少会看到想要的东西的开始。 Because .grezzo is 200px wide, there's some overlap if you do it in jsfiddle . 因为.grezzo的宽度为200px，所以如果在jsfiddle中进行重叠，则会有些重叠。 Without knowing your overall page layout it's difficult to advise whether this is actually a good solution for you or not. 不知道您的总体页面布局，很难建议这实际上是否对您来说是一个好的解决方案。

Answer 2

Give each div the same class eg .block then for css, add .block { display: inline-block; } 给每个div相同的类，例如.block然后对于CSS，添加.block { display: inline-block; } .block { display: inline-block; }

http://jsfiddle.net/4LRuA/1/ http://jsfiddle.net/4LRuA/1/

无法水平对齐左，中/右DIV

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-01-20 18:57:00

解决方案2
0 2013-01-20 18:50:42

无法水平对齐左，中/右DIV

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-01-20 18:57:00

解决方案2 0 2013-01-20 18:50:42

解决方案1
1 已采纳 2013-01-20 18:57:00

解决方案2
0 2013-01-20 18:50:42