不使用HTML表格进行居中对齐

Question

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

我有以下几个要素：

IMG

IMG

DIV

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

似乎很简单，对吧？嗯，技巧是图像左右两侧的分数是可变宽度，我希望圆角矩形的中心在两个图像之间切片，无论宽度如何得分值。 （因此，我不能只围绕整个块包裹div并使用text-align: center。对我没有好处。）

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

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

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

Here is a jsfiddle to play with.

非常感谢您的帮助！

Answer 1

这是交易：

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

那应该能得到你想要的东西。 And here's proof（在你发布小提琴之前开始）

Answer 2

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

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

Answer 3

div的所有内部子元素都应该有float: left。然后，父div应该有overflow: hidden。然后，您可以在margin元素中添加其他div img。

Answer 4

这是一个示例解决方案。这个想法是你有一个包装器做灰色背景和大小吧。你有一个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;
}