試圖對準兩個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位置

回答

相關問題