將兩個div中的一個垂直居中在同一條線上？

alt text 我們如何讓文字「創建新位置」垂直居中？將兩個div中的一個垂直居中在同一條線上？

HTML/CSS在下面。

將margin-top:5px添加到「創建新..」div有助於但似乎hacky。

<div style="margin-top:5px"> 
    <div style="float:left">Create new position</div> 
    <div style="float:right"><input type="submit" id="x" value="Save"></div> 
    <div style="clear: both;"></div> 
</div>

來源

2010-11-10 Marcus Leon

如果我的回答幫你，請考慮點擊其下方得分小複選框，將其標記爲「已接受」。如果沒有，請讓我知道你需要什麼進一步的信息，所以我可以幫助你更多。 – 2013-05-16 19:49:16

以下可能對您有所幫助。

<div align="center"> 

</div>

因此，它看起來像這樣也許：

<div align="center"> 
<div style="float:left">Create new position</div> 
<div style="float:right"><input type="submit" id="x" value="Save"></div> 
<div style="clear: both;"></div>

來源

2010-11-10 18:17:33 prolink007

使室內的行高的div相同的高度，外部div的高度。

例子：

<div style="margin-top:5px; height: 100px;"> 
      <div style="float:left; line-height: 100px;">Create new position</div> 
      <div style="float:right"><input type="submit" id="x" value="Save"></div> 
      <div style="clear: both;"></div> 
     </div>

來源

2010-11-10 18:38:48 Jeff

此方法應該在所有的瀏覽器，是穩定的，並讓您輕鬆選擇您希望您的內容爲中心的對象。空容器是我用這種方法唯一的問題，但在比較其他方法的優缺點時，我可以輕易忽略它。

解決方案：您可以使用一個div在父母的高度的一半把你的內容塊（push_to_center類），然後由內容高度的一半（內容類）酌減。

內嵌樣式聲明

<div style="float:left; height:50%; margin-bottom:-55px;"></div> 
<div style="clear:both; height:110px; position:relative; width:200px;"> 
    <div style="float:left">Create new position</div> 
    <div style="float:right"><input type="submit" id="x" value="Save"></div> 
</div>

完整的HTML頁面（see it working）：

<html><head><title>Test Center Div</title> 
<style> 
    .push_to_center {float:left; height:50%; margin-bottom:-55px;} 
    .content {clear:both; height:110px; position:relative;} 
</style> 
</head> 
<body> 
    <div class="push_to_center"></div> 
    <div class="content" style="width:200px; height:110px;"> 
     <div style="float:left;">Create new position</div> 
     <div style="float:right;"><input type="submit" id="x" value="Save"></div> 
    </div> 
</body> 
</html>

從中心只需將它移出內容排除保存按鈕分類的div（如果你想要它在上面，請在頁面流中放一些，如果你想在下面放在頁面下面）：

來源

2010-11-10 19:10:53

略有不同的方法，但你並不需要的花車，垂直對齊應該在這種情況下正常工作IMO：

<div> 
    Create new position: 
    <input type="submit" id="x" value="Save" style="vertical-align:baseline;" /> 
</div>

來源

2010-11-10 19:33:49 Mig

我總是用這樣的伎倆：

style="height: 30px; line-height: 30px; vertical-alignment: middle;"

有固定的高度加上與線高度加中間垂直對齊相同的高度。

也許以上是更好的答案，我發佈這個，因爲它很簡單，爲我工作。 :)

來源

2010-11-11 13:39:34

解決此問題的方法是在「創建位置」div中添加margin-top:4px。這是我可以開始工作的唯一解決方案！

來源

2010-12-03 19:06:28

這將工作.....

<table style="height:500px;width:100%"> 
<tr> 
<td> 
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;"> 
       <div style="float:left;">Create new position</div> 
       <div style="float:right"><input type="submit" id="x" value="Save"></div> 
       <div style="clear: both;"></div> 
      </div> 
      </td> 
      </tr> 
      </table>

來源

2013-02-02 09:54:18

以下內容將基於創建兩個項目相等的行高來工作。

HTML：

<div class="row"> 
    <span class="left">Create new position</span> 
    <span class="right"><input type="button" value="Save" /> 
</div>

CSS：

/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */ 
* { font-family: Tahoma, sans-serif; font-size: 12px; } 
.row { border: 1px solid #ccc; } 
/* END EXAMPLE ONLY PORTION */ 

.row { height: 24px; } 
.row > span { line-height: 24px; } 
.left { float: left; } 
.right { float: right; }

訣竅是設置含有.rowDIV是具有24px高，並且還設置了包含SPAN元件line-height的24px。通過這樣做，您可以告訴瀏覽器需要多少垂直空間才能處理文本行。

但是請注意，24px不是重要的部分 - 重要的部分是確定button的高度，這是基於您的CSS和您選擇的按鈕本身的字體。

在這種情況下，我給你垂直居中的例子的原因是基於我放在頂部的EXAMPLE ONLY CSS - 它表示字體大小應該是12px。然後，將默認瀏覽器尺寸（至少在鉻）將可提供按鈕周圍一點點額外的margin和padding，以及邊界 - 這將導致大約24px總高度，而這種外觀：

Example

邊框也是由示例CSS創建的，僅用於向您顯示垂直對齊是正確的。一旦你刪除.row { border: 1px solid #ccc; }，它會消失。

這裏是一個JSBin這說明它的工作：

http://jsbin.com/otekil/1/edit

來源

2013-04-11 19:27:35

將兩個div中的一個垂直居中在同一條線上？

回答

相關問題