Question

我正在尝试将两个div对齐到中心，并使用css

在相同的位置开始

这是内联样式的css代码。第一个div的名称是容器，第二个div的名称是 descriptionarea

#container {
            width: 60%;
            height: auto;
            margin-left:auto;
            margin-right:auto;
        }

        .inner-container {
            min-height: 400px;
            display: inline-block;
            overflow-y: auto;
            border: 4px solid black;
            margin-left:auto;
            margin-right:auto;
        }

        #chats-container {
            height: 70%;
            width: 60%;
            padding-top:5px;
            padding-left:5px;
        }

        #users-container {
            height: 70%;
            width: 22%;
            padding-top:5px;
            padding-left:5px;
        }

        input[type=submit] {
        border: 1px solid #f44c0e;
        color: #fff;
        background: tomato;
        padding: 10px 20px;
        border-radius: 3px;
        }
        input[type=submit]:hover {
            background: #f44c0e;
        }

        textarea {
         width: 550px;
         height: 60px;
         font: normal 14px verdana;
         line-height: 30px;
         padding: 2px 10px;
         border: solid 1px #ddd;
        margin-left: auto;
        margin-right: auto;
        }


        .descriptionarea {
       min-width: 490px;
       position: relative;
       display: inline-block;
        margin-left: auto;
        margin-right: auto;
        }

    .descriptionarea textarea{
    width: 490px;
    height: 20px;
    height: 60px;
    font: normal 14px verdana;

    }

    .descriptionarea span.namefortxtarea{
        display: block;
        text-align: left;
        font-size:12px;
    }

    .descriptionarea span.buttonfortxtarea{
        display: block;
        text-align: right;
    }

这就是我如何调用/应用html格式的两个div 第一个div

<div id="container">
    <div id="chats-container" class="inner-container">
    </div>
   <div id="users-container" class="inner-container">

    </div>
</div>

第二个div

<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
    <button class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
    </div>

我已经尝试过应用这两个div但是仍然没有两个div与中心对齐并且没有开始到相同的位置。

保证金左：汽车; 余量右：汽车;

Answer 1

如果删除div＃container的id属性并在.descriptionarea类中替换它，并用div div＃容器包装两个div，则div将在中心排列。

<div id="container">
<div class="descriptionarea">
    <div id="chats-container" class="inner-container"></div>
    <div id="users-container" class="inner-container"></div>
</div>
<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
             <button class="btn btn-mini description_submit" id="new-chat-button">Submit</button>
    </span>
</div>
</div>

Answer 2

一种解决方案是使用Flexbox

Answer 3

是的，您可以使用Flexbox，它支持所有流行的浏览器，并且请在类名中使用CamelCase表示法或连字符。

Answer 4

这种情况是因为显示：内联块。您应该尝试使用将块放在一个容器中并使用float：left作为第一个和第二个div。并删除display：inline-block

<div class = "center">
    <div id="chats-container" class="inner-container">
</div>
   <div id="users-container" class="inner-container">

</div>
</div>
<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
    <button class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
    </div>
</div> 



 .inner-container {
            min-height: 400px;
           float: left;
            overflow-y: auto;
            border: 4px solid black;
            margin-left:auto;
            margin-right:auto;
        }

.descriptionarea {
       min-width: 490px;
       position: relative;
       margin-left: auto;
        margin-right: auto;
        float: left;
        }

试图将两个div对齐到中心，从同一个位置开始

4 个答案: