html div垂直對齊

任何人都可以請幫我調整這個div垂直我想要secondDiv下面firstDiv。我看到很多帖子，但無法解決它任何人都可以更改我的代碼來工作。html div垂直對齊

<div> 
    <div style="position:relative;width:800px;margin:0;padding:0"> 
     <div id="firstDiv" style="text-align:center;position:absolute;margin-top:0"> 
      <div> 
       <span> 
        <input type="submit" title="" value="Select Photos From Your Computer" 
        name="sendBtn"> 
       </span> 
      </div> 
      <div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100"> 
       <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data"> 
        <input type="file" style="opacity:0;font-size:20px;" accept="image/*" 
        name="d" id="d"> 
       </form> 
      </div> 
     </div> 
     <div id="secondDiv" style="text-align:center;margin:3px 0 12px;"> 
      <span>You can add upto</span> 
      <span style="font-weight:bold">3 Photos</span> 
     </div> 
    </div> 
</div>

來源

2012-04-18 saravanan shanmugavel

如果除去從firstDiv它將工作position: absolute; ... see here for an example

來源

2012-04-18 09:58:46 ManseUK

雅雖然工作，但你可以看到我的第一個div我absoluting按鈕和文件輸入，使用戶認爲，他們正在點擊按鈕。無論如何，我都需要這個功能，而不必刪除絕對的。 – 2012-04-18 10:03:19

@saravananshanmugavel我真的不明白你想做什麼...也許更新你的問題，你面對的問題 - 而不是問一個關於定位的問題 – ManseUK 2012-04-18 10:07:11

對不起，亞爾得到它後，刪除了它的工作位置感謝 – 2012-04-18 10:23:47

刪除position:absolute;爲firstdiv

來源

2012-04-18 09:58:53

在DIV變了樣

> <div id="firstDiv" style="text-align:center;margin-top:0;">

，你會得到這樣的輸出

enter image description here

來源

2012-04-18 10:00:05

從firstDiv的style屬性中刪除「position：absolute」，它似乎回答你的問題。

這也導致東西四處移動。所以你需要準確描述你想要的東西。

您應該避免使用position：absolute和position：fixed，除非您做了一些奇特的事情（例如菜單欄或窗口內的窗口彈出窗口）。所以刪除所有「位置：......」以及「頂部：...」。

爲什麼你有中間那個不透明的0文件輸入？如果你想隱藏並刪除空白空間，將其改爲「display：none」（並取消隱藏：「display：block」（如div）或「display：inline」（如跨度）

這裏是不透明度改變顯示，並刪除所有定位的東西（頂部：，位置：等）。

<html> 
<head> 
<style> 
</style> 
</head> 
<body> 
    <div> 
     <div style="width: 800px; margin: 0px; padding: 0px"> 
      <div id="firstDiv" style="text-align: center; margin-top: 0"> 
       <div> 
        <span> 
         <input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" /> 
        </span> 
       </div> 
       <div style="width:492px; height:20px; overflow:hidden; z-index:100"> 
        <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data"> 
         <input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" /> 
        </form> 
       </div> 
      </div> 
      <div id="secondDiv" style="text-align: center; margin: 3px 0 12px;"> 
       You can add up to 
       <span style="font-weight:bold">3 Photos</span> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

其他的答案閱讀您的意見後，試試這個：http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file

來源

2012-04-18 10:08:02 Peter

感謝他們工作。非常感謝。 – 2012-04-18 10:13:45

html div垂直對齊

回答

相關問題