3

这是一个棘手的情况，所以我无法在标题中正确解释。但我试过了。

请看这个小提琴：http: //jsfiddle.net/yCjnz/

HTML：

<div class="parent">
    <div class="child"></div>    
</div>

CSS：

div {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJFQUREODEyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJFQUREODIyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkVBREQ3RjI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkVBREQ4MDI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ppi8nlwAAAAOSURBVHjaYmBgYAAIMAAABAABmwPqCQAAAABJRU5ErkJggg==') repeat-y center center;
}

.parent {
    border: 1px solid red;
    width: 150px;
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.child {
    border: 1px solid green;
    width: 250px;
    height: 300px;
    position: absolute;
    left: auto;
    top: 32px;
}

有两个元素，我希望它们看起来像这样：

在此处输入图像描述

这样一个元素的中心将与另一个元素的中心对齐。我不能left: -50px用于.child元素，因为这width两个元素的不同。如何使用 CSS 实现结果？我也可以使用 JavaScript 和 jQuery，但如果可能的话，我希望有一个 CSS 解决方案。

4

5 回答 5

3

如果可以的话，不要把它们放在另一个里面，例如http://jsfiddle.net/FzBtv

HTML：

<div class="parent"></div>
<div class="child"></div>

CSS：

.parent {
    border: 1px solid red;
    width: 150px;
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.child {
    border: 1px solid green;
    width: 250px;
    height: 300px;
    position: relative;
    margin: 0px auto;
    margin-top:1px;
}
于 2013-10-08T08:35:35.333 回答
1

是否有特定原因必须将较大的元素嵌套在较小的元素中？

http://jsfiddle.net/yCjnz/10/

我交换了属性并改变了位置（交换了父母和孩子）

.parent {
  border: 1px solid green;
  width: 250px;
  height: 300px;
  position: relative;
  margin:0px auto;
  top:32px;
}
.child {
  border: 1px solid red;
  width: 150px;
  height: 30px;
  margin: 0px auto;
  position: relative;
  top:-32px;
}
于 2013-10-08T08:43:26.863 回答
1

HTML

<div class="container">
<div class="parent"></div>
<div class="child"></div>    
</div>

CSS

.parent , .child {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJFQUREODEyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJFQUREODIyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkVBREQ3RjI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkVBREQ4MDI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ppi8nlwAAAAOSURBVHjaYmBgYAAIMAAABAABmwPqCQAAAABJRU5ErkJggg==') repeat-y center center;
}

.parent {
    border: 1px solid red;
    width: 150px;
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.child {
    border: 1px solid green;
    width: 250px;
    height: 300px;
    margin: 0px auto;
}

小提琴演示

于 2013-10-08T08:36:09.327 回答
1

您的代码有几个问题。主要是你父母的宽度小于孩子的宽度。坦率地说，我不确定这是为什么。第二个问题是您的孩子有position: absolute;- 这将有效地将其设置在特定的像素点 - 如果没有明确指定，则为 0。我对您的代码进行了一些更改：

  • 使父母的宽度大于孩子的宽度
  • position: absolute从孩子身上移除并将其更改top为margin-top
  • 将孩子设置margin为auto

这是结果的jsfiddle

于 2013-10-08T08:37:13.387 回答
1

如果不更改您的标记，我想不出任何纯 CSS 解决方案；但是，使用 jQuery，很容易实现：（工作 jsFiddle）

var $child = $('.child');
var $parent = $('.parent');

$child.css('left','-'+(Math.abs($child.width()-$parent.width())/2)+'px');

由于两种尺寸都可能不同，因此即使是 CSS3calc()函数也无济于事。

正如@Tyron 注意到的那样，.childif 由于其左边框而关闭了 1px。您可以通过添加以下内容来解决此问题：

.child{margin-left:-1px;} /* 1px being border-left's width */
于 2013-10-08T08:37:33.573 回答