Question

请注意：我是CS的新手。全新的。

我希望我的按钮div水平放置在确认div中：example。

现在我的dialog-button div宽度等于确认Div的宽度。为什么呢？

我只是在我的Div中放置了两个按钮，所以它的宽度应该等于128（两个按钮的总数）。同样地，高度应该等于按钮高度，但不是。

其次我希望mt button-div水平放置中心。我在left: 50%内尝试了button-div。但是它将左边距与确认div的中心对齐。我该怎么做？

修改 --------------------------------------------------

enter image description here

Answer 1

可能是我没有正确理解，但是如果你想要它，那就把它放进去。

<div id="message">

    Are you sure you want to  

    <div id="dialog-button">
        <button>Ok</button>
        <button>Cancel</button>
    </div>             
</div>

Demo

更新1

现在我的对话框按钮div宽度等于确认Div的宽度。为什么？

为什么，因为<div>是块标记，所以始终占用包含元素的100％宽度。它不等于确认Div的宽度。

要使dialog-button取实际宽度，请使用display: inline-block作为CSS。 Demo

更新2：

从我的理解中获得最佳效果。 This就是你想要的。如果没有帮助我帮助你。

更新3：

好的，这是图片的demo。我将把without image部分留给你。 ;）

Answer 2

两个按钮所在的div实际上是确认div 的宽度。 divs拉伸到其父级宽度的原因是因为它是块级元素。

每件事情看起来如此令人困惑的原因是你的例子中有很多左浮动div。这些正在改变通常的布局。为了简单起见，为什么不尝试删除一些更令人困惑的元素。我建议尝试一个更简单的例子，如下所示：

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
        <link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
        <script type="text/javascript" src="js/jquery-1.7.1.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
        </script>
        <script type="text/javascript" src="js/puff.js"></script>
        <script type="text/javascript" src="js/jquery.dialog.js"></script>
    </head>
    <body>
        <div id="confirm">        
            <div id="message">
                   Are you sure you want to  
            </div>
            <div id="dialog-button">
                <button>Ok</button>
                <button>Cancel</button>
            </div>
        </div>
    </body>
</html>

如果您想将按钮居中。如果将margin-left和margin-right更改为auto，则会将任何块元素居中。尝试将你的CSS更改为下面的CSS：

#confirm {
    background-color: #ddd;
    display:block;
    width:400px;
    min-height:120px;
    position:absolute;
    border:1px solid #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;              /*FireFox*/
    -webkit-border-radius: 15px;           /*Opera, safari*/
    behavior: url(css/border-radius.htc);  /*IE*/
}
#message {
    width: 280px;
    border:1px solid #ccc;
    white-space: normal;
    word-wrap: break-word;
    margin:20px 0 0 0;
    overflow: hidden;
}
#dialog-button {
     border:1px solid #ccc;
     position: relative;
}
button {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 64px; 
}

注意，如果必须使按钮成为块元素，则可以使用margin auto技巧。

你可以find more about block level element here.

关于div的困惑 - 为什么它不像它的内容那么宽，我怎么能把它居中呢？

2 个答案:

更新1

更新2：

更新3：