两个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文本（左侧和右侧）中心文本

回答

相关问题