试图对准两个div该中心在thesame位置

我试图对准两个div到中心开始使用CSS试图对准两个div该中心在thesame位置

这是内嵌式的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不与中心对齐，并且不开始相同的位置。

margin-left：auto; margin-right：auto;

来源

2016-08-01 Andrea Robinson

这将是棘手试图集中对齐2 each div each other - 你最好把它们都放入一个容器，然后集中对齐容器。 –

如果删除了DIV＃容器的id属性和.descriptionarea类内更换它，你换一个父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>

来源

2016-08-01 13:16:15

请问你能否进一步细分。如果可能，请添加更多片段 –

以下是一个合并浮点规则并允许您的HTML代码更具响应性的示例。 [链接]（https://jsfiddle.net/n3ubxtv1/2/） –

一种解决方案是使用Flexbox

来源

2016-08-01 12:45:04

是的，你可以使用Flexbox的，它支持所有流行的浏览器，并请使用驼峰符号或连字符的类名。

来源

2016-08-01 12:51:01 dpischalkda

这种情况是因为display：inline-block。你应该尝试使用把你的块放在一个容器中，并使用float：left作为第一个和第二个div。并删除显示：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; 
     }

来源

2016-08-01 12:55:01 Alice

试图对准两个div该中心在thesame位置

回答

相关问题