0

我想在位于中心的其他 div 的右侧添加一个 div。如图所示：

在此处输入图像描述

到目前为止，我有这个 html：

<div id= "top-menu-wrapper">
  <div id="top-menu">       
  </div>
  <div id="social">
  </div>
</div>

的CSS：

#header #top-menu {
    display           : inline-block;
    width             : 764px;
    height            : 55px;
    margin            : auto;   
}

#header #social {
    display           : inline-block;
    width             : 100px;
    height            : 55px;   
    margin-left       : 25px;

}

#header #top-menu-wrapper {
    display           : block;
    text-align        : center;
    margin-bottom     : 25px;
}
4

2 回答 2

1

由于您的宽度是固定的，因此只需计算每个 div 的左侧偏移量，并将其作为左边距而不使用中心对齐。

或者，如果您的容器是流动的，则将有问题的 div 居中在一个右浮动的子容器中，其宽度为

(top container width - central div width) / 2)（表示右边的剩余空间）

如果您使用 JavaScript 窗口调整大小侦听器在每个调整大小事件上重新计算其位置，您可能会使其看起来最好。（虽然您更喜欢仅使用 CSS，但我建议使用 JS 以获得最佳效果）

于 2013-07-10T22:34:59.167 回答
0

由于您使用 inline-block 来显示您的框，因此父级可以具有 :text-align:center;并且第二个框具有其自身宽度的负边距，以将第一个框拉到中间。

http://codepen.io/gcyrillus/pen/ADsEx

背景颜色用于显示框的位置，并添加标尺以检查视觉水平中心。

#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  margin-right      : -100px; 
  background        : yellow;
}

#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}

这样，您不介意父母的宽度，除非您希望他们 2 始终在一条线上。如果是这样，则可以应用 min-width: 足够宽。

另一种解决方案是添加一个与boxe 2相同宽度的伪。 http://codepen.io/gcyrillus/pen/hipBl 

body {
  padding           : 2em;
  margin            : 0;
}
#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social, #top-menu-wrapper:before {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  background        : yellow;
}
#top-menu-wrapper:before {
  content           : '';
  height            : 0;
}
#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}
于 2013-07-10T23:19:42.660 回答