如何忽略父母的中心位置 [英] How to ignore parents div center position

问题描述

div（page-wrap）是页面容器，它的宽度为960px，它的位置居中在页面中间。我想有一个忽略这个并具有页面宽度的子div。

  .page-wrap {
最小高度：100％; 
最大宽度：960px; 
 margin：0 auto; 
 / *等于页脚高度* / 
 margin-bottom：-50px; 
} 
  

我想让这个div忽略上面的内容

  hr {
 display：block; 
 height：1px; 
 border：0; 
 border-top：1px solid #ccc; 
保证金：0; 
 padding：0; 
 
  

HTML

 < div class =page-wrap> 
< img src =logo.jpgwidth =150pxheight =75px> 
< hr /> 
< / div> 
  

解决方案

您可以使用 position：绝对; 只有当没有任何父元素 position：relative 时，否则没有选择可以实现这个功能。

.page-wrap {min-height：100％; max-width：360px;保证金：0汽车; / *等于页脚高度* / margin-bottom：-50px;} hr {display：block; height：1px; border：0; border-top：1px solid #ccc;保证金：0;填充：0; / *添加* /位置：绝对;左：0; width：100％;}

< div class =页缠绕> < img src =logo.jpgwidth =150pxheight =75px> < hr />< / div>

The div (page-wrap) is the page container, it has a width of 960px and its position is centered to the middle of the page. I want to have a child div that ignores this and has the width of the page.

.page-wrap {
  min-height: 100%;
  max-width: 960px;
  margin:0 auto;
  /* equal to footer height */
  margin-bottom: -50px;
}

I want this div to ignore the above

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

HTML

<div class="page-wrap">
    <img src="logo.jpg" width="150px" height="75px">
    <hr/>
</div>

解决方案

You can use position: absolute; only if there isn't any parent element with position:relative, otherwise there is no option to achieve this I guess.

.page-wrap {
  min-height: 100%;
  max-width: 360px;
  margin: 0 auto;
  /* equal to footer height */
  margin-bottom: -50px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;

  /*added*/
  position: absolute;
  left: 0;
  width: 100%;
}

<div class="page-wrap">
  <img src="logo.jpg" width="150px" height="75px">
  <hr/>
</div>

这篇关于如何忽略父母的中心位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！