在不使用 HTML 表格的情况下居中对齐答案

【问题标题】：Center-aligning without using HTML tables在不使用 HTML 表格的情况下居中对齐
【发布时间】：2013-07-10 05:12:00
【问题描述】：

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

我有以下单个元素：

图片

div

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

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

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

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

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

Here is a jsfiddle to play with.

非常感谢您的帮助！

【问题讨论】：

一个 Jsfiddle 或类似的东西会让人们很容易尝试并尝试创建一个解决方案
这是一个起点小提琴 - jsfiddle.net/DzXUh
@acjohnson55 查看编辑，添加了 jsfiddle

标签： html css

【解决方案1】：

这是交易：

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

这应该可以得到你想要的。 And here's proof（在您发布小提琴之前开始）

【讨论】：

看起来很有希望！做了一些调整并得到了这个，这非常接近我想要的结果：jsfiddle.net/33XQ7/1
甜蜜！多花点时间，我想你明白了。
好吧，当您尝试添加多个游戏时，我遇到了障碍。图像和分数的垂直对齐不再与圆形背景对齐：jsfiddle.net/33XQ7/2。想法？
好的，看起来我需要做的就是增加margin-top 的.game div！

【解决方案2】：

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

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

【讨论】：

查看我添加到原始问题中的 jsfiddle 链接。这个问题似乎比你的答案更复杂。

【解决方案3】：

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

【讨论】：

【解决方案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;
}

【讨论】：