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垂直对齐

回答

相关问题