0

好的，所以我试图在div不使用表格的情况下使元素在中间（两个图像之间）对齐（因为表格不应该用于样式/布局）。

我有以下单个元素：

图像

第一个徽标

图像

第二个标志

div

舍入 DIV

我希望使用 CSS 的最终输出为：

最终输出

看起来很简单，对吧？好吧，诀窍是图像左侧和右侧的分数是可变的 width，我希望圆角矩形的中心在两个图像之间向右切片，而不管分数值的宽度如何。（因此，我不能只在整个块周围包裹一个 div 并使用text-align: center。对我没有好处。）

正如您在我的示例图片中看到的那样，矩形的边缘和右侧的分数之间的空间比左侧的要多，因为左侧的分数本身更宽。

另请注意，图像在矩形 div 的上方和下方略微扩展，这是使用表格不理想的另一个原因。

我尝试使用 、 、 等的组合来完成此布局margin-left: auto，margin-right: auto但display: inline-block我无法获得我正在寻找的居中效果。

这是一个可以玩的jsfiddle。

非常感谢您的帮助！

4

4 回答 4

1

这是交易：

  • .team应该有width: 50%并且应该向左浮动。或者对。任何。
  • 图像应向中心浮动。左边的应该向右浮动，右边的应该向左浮动。
  • 图像也应该有position: relative和负top。
  • .team应该也有text-align设置。左边那个应该有text-align: right
  • 外部容器应该overflow设置为visible（这是默认设置 - 我只是想提一下，因为其他答案告诉你使用overflow: hidden. 这会破坏你的“盒子外面”的东西）。

那应该可以得到你想要的。这是证据（在您发布小提琴之前开始）

于 2013-07-09T20:46:41.280 回答
0

UI 元素（不是内容的东西）应该是 CSS 背景。制作一个合成图像并将其作为包装 DIV 的背景，然后在其中制作两个 - 一个向左浮动，另一个向右浮动，并带有一点边距和填充，一切都会正常工作。

<div class="wrapper">
   <div class="scoreLeft"></div>
   <div class="scoreRight"></div>
</div>
于 2013-07-09T20:37:14.087 回答
0

你的所有内部子元素都div应该有float: left. 那么，父母div应该有overflow: hidden. 然后，您可以从那里向元素添加额外margin的 's 。div img

于 2013-07-09T20:37:33.800 回答
0

这是一个示例解决方案。这个想法是你有一个包装器来做灰色背景并调整条形。您将拥有一半大小的 div 并将文本与中心对齐，同时放置足够的填充以允许背景图像。

HTML

<div class="wrapper">
   <div class="scoreLeft">1231231</div>
   <div class="scoreRight">123</div>
</div>

CSS

.wrapper {
  background: grey;
  background-image:url('http://i.stack.imgur.com/4fkZv.png');
  background-size:400px 50px;
  height: 50px;
  width: 400px;
  display: table; //Allow for vertical align
  table-layout: fixed;  //Allow for fixed widths of children
}
.scoreLeft, .scoreRight {
    color: white;
    display: table-cell;  //Allow for vertical align
    vertical-align: middle;
    width: 50%;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  //Allow for 50% width with padding sitting inside the 50%.  This can be mathed out so the width + padding * 2 = wrapper width and then you can use the default box-sizing.
}
.scoreLeft {
  background-image:url('http://i.stack.imgur.com/CmWiD.png');
  background-size:50px 50px;
  background-repeat: no-repeat;
  background-position:right;
  text-align: right;
  padding-right: 55px;
}
.scoreRight {
  background-image:url('http://i.stack.imgur.com/Gkll9.png');
  background-size:50px 50px;
  background-repeat: no-repeat;
  padding-left: 55px;
}
于 2013-07-09T21:01:55.347 回答