Html 如何将div居中并放置在另一个div的底部_Html_Css

Html 如何将div居中并放置在另一个div的底部

html css

Html 如何将div居中并放置在另一个div的底部,html,css,Html,Css,在所有的帖子中，我都能找到一个解决方案，要么把一个div放在另一个div的中间，要么把一个div放在另一个div的底部，这个建议很好，但我还没有找到同时做这两件事的方法我的代码是： <body style="text-align:center; margin:0; padding:0;"> <div style="width:100%; height:100px; background-image:url(header.png);position:relative;"&g

在所有的帖子中，我都能找到一个解决方案，要么把一个div放在另一个div的中间，要么把一个div放在另一个div的底部，这个建议很好，但我还没有找到同时做这两件事的方法

我的代码是：

<body style="text-align:center; margin:0; padding:0;">
  <div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
    <div>
      <div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
        <div style="float:left; position:relative; left:30px; top:15px">
          <img src="logo.png" width="88" height="38">
        </div>
        <div style="margin-top:15px">
          <h1>Product Form</h1>
       </div>
     </div>
   </div>
 </div>
</body>


产品形式

我想做的就是把

formtop.png

div放在包含div的底部和中心。我可以做一个或另一个，但不能同时做两个。如果我将

position:absolute

更改为

position:relative

，则图像会居中，但太高。当我把它改回absolute时，它很好地位于其包含div的底部，但在IE中它远离右侧，在firefox中它位于页面的左侧

有什么建议吗？

您可以将formtop.png

设置为100%宽度，并使用CSS将背景图像居中：

<!-- div with the formtop.png background -->
<div style="
   height:75px; 
   width:100%; 
   background:url(formtop.png) no-repeat 50% 0; 
   bottom:0; 
   position: absolute;">

另一方面，如果将所有内联样式移动到.css文件中，代码将更易于使用和维护：

<div class="formTop">

.formTop {    
    position: absolute;
    bottom: 0;
    left: 0;    

    height: 75px;
    width: 100%;

    /* Set the background image to centered in this element */
    background: url(formtop.png) no-repeat 50% 0;      
}


.formTop{
位置：绝对位置；
底部：0；
左：0；
高度：75px；
宽度：100%；
/*将背景图像设置为在此元素中居中*/
背景：url（formtop.png）不重复50%0；
}

您是否尝试过

左：0；右：0绝对定位元素的技巧？它不适用于IE7或IE6，但适用于其他浏览器和更高版本
这是一个示例
尝试避免仅用于样式的html元素，因为您可能希望稍后更改样式
，它使用：在
伪类之后：
div {
    width:100%;
    position: relative;
    background-image: url(header.png);
}

div:after {
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 20px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
    background-repeat: no-repeat;
    background-position: center 0px;
}

您可以将header.png设置为div
的背景。您可以修复HTML代码吗？它目前的格式不正确，很难明确地理解它应该是什么样子。此外，如果您将CSS作为单独的样式表发布，而不是使用内联样式，则解析起来会容易得多。非常感谢。这正是我所需要的。在IE和Firefox中看起来很棒。再次感谢！嗨，好方法。。。！我不明白，直到现在。。。不管怎样，这很酷。我可以问一下位置如何影响边距行为吗？如果您想将div居中并将其从中心移动，您将无法使用此技巧，因为您必须使用右边距
和左边距
作为自动
。但是你仍然可以在里面嵌套一个div
，并使用它的边距、位置等。。。