试图将两个div对齐到中心，从同一个位置开始(trying to align two divs to the center to begin at thesame position)

试图将两个div对齐到中心，从同一个位置开始(trying to align two divs to the center to begin at thesame position)

我试图将两个div对齐到中心，并使用css在相同的位置开始

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

#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与中心对齐并且没有开始到同一个位置。

保证金左：自动; 保证金右：自动;

I am trying to align two divs to the center and to begin at the same position using css

this is the inline style css code. The name of the first div is container and the name of the second 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; }

this is how I am calling/applying the two divs in html format first div

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

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

I have tried applying to both divs but still the two divs is not aligned to the center and not beginning to the same position.

margin-left:auto; margin-right:auto;

最满意答案

如果删除div＃container的id属性并在.descriptionarea类中替换它，并将两个div包装为父div＃container，则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>

If you remove the id attribute for div#container and replace it within .descriptionarea class and you wrap both divs with a parent div#container your divs will line up in the center.

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