兩個div之間的div文本（左側和右側）中心文本

我想將div中的表單元素（水平和垂直）居中。整個div應該居中，位於左右分區之間。兩個div之間的div文本（左側和右側）中心文本

問題：

通過正確的div沒有對齊的填充。
此外文本（Text1）不正確垂直對齊。 - > padding-top作品
表格的全部內容不是水平對齊的。

HTML：

<div id="top"> 
    <div id="top-background-left">&nbsp;</div> 
    <div class="external"> 
    <div class="externalinner"> 
     <form id="form" name="form" method="post" action="action.html"> 
     <p style="float: left; padding-right: 10px;">Text1</p> 
     <input name="one" id="one" type="text" size="15" maxlength="10" /> 
     <select name="no" size="1"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2" selected>2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select> 
     <button type="submit">Go</button> 
     </form> 
    </div> 
    </div> 
    <div id="top-background-right">&nbsp;</div> 
</div>

CSS：

#top{ 
    padding: 0px; 
    width: 100%; 
    height: 66px; 
    background-color: #efa910; 
    z-index:12; 
    position:fixed; 
    overflow:hidden; 
} 

.externalinner { 
    text-align: left; 
    padding-top: 20px; 
} 

.external { 
    background: #efa910; 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:900px; 
} 


#top-background-left { 
    background: white; 
    width: 150px; 
    height: 66px; 
    float: left; 
} 

#top-background-right { 
    background: white; 
    width: 150px; 
    height: 66px; 
    float: right; 
}

來源

2012-07-18 testing

正如加雷思說here

移動<div id="top-background-right"> </div>之前的<div class="external">解決右邊的div失準。

至於文本對齊方式改變其CSS您<p>成<span>和刪除float:left將使其與形式的休息，這將讓你水平居中它內聯元素。（或者你可以改變float:left成display:inline任何你最適合

最後你將需要從.external類中刪除width: 900px還有如下兩行：。

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

不需要要麼，所以你可以將其刪除。

這裏是jsFiddle適合你。

來源

2012-07-18 16:43:28 Dan

如果我使窗口變小，則由於「overflow：hidden;」，元素消失。我試圖在外部設置一個「最小寬度」，但元素仍然消失。你有解決方案嗎？ – testing 2012-07-18 16:59:23

@testing你將需要在'top'類中放置'min-width'。這是[jsFiddle]（http://jsfiddle.net/M5Nh5/12/）。 – Dan 2012-07-18 17:10:39

如果窗口尺寸較小，是否有可能使top-background-left變小？現在，如果我已經用1024x768分辨率進行測試。在我的真實例子中，表格的一些輸入丟失了。 – testing 2012-07-19 09:59:41

移動<div id="top-background-right"> </div>之前的<div class="external">解決了右div失準。

如果將line-height添加到與表單高度相同的p可修復文本錯誤對齊。

modified jsFiddle

我不明白你的第三個問題是什麼意思。

來源

2012-07-18 16:30:09 Gareth

FO形式（文本1，文本框，選擇，按鈕）的內容應該被水平對齊。目前它與左邊對齊。 – testing 2012-07-18 16:35:01

由於其他海報已經說了，行高是垂直居中文本的好方法。

這裏是一個沒有float的例子，使用position來排列div。

我在3個元素周圍添加了一個容器，並以綠色突出顯示了左右分區，您可以看到它們。

告訴我你是否也適合你，或者如果我錯了，你必須找到一個解決方案，而不必改變html源代碼。

jsfiddle example

來源

2012-07-18 16:46:36 r3bel

兩個div之間的div文本（左側和右側）中心文本

回答

相關問題