CSS - 需要帮助将流体宽度内的内容水平居中div

我环顾四周寻找答案，并试图插入所有我能想到的东西，但我似乎无法弄清楚这一点。我觉得我很可能忽略了一些非常简单明显的事情，但是任何帮助你都能感受到！CSS - 需要帮助将流体宽度内的内容水平居中div

基本上我试图自定义this page，以便小字符框在其.wrapper div内水平居中。

虽然div本身在页面中间水平居中（我用padding：0 15％），但内容不在之内。

Here is a pastebin of the entire code如果有人愿意的话。相关部分是140行。预先感谢您的帮助！

2016-09-15 Cassie

[这里是一个更好的图片]（http://i.imgur.com/ax4hKCq.jpg）说明我说什么，当我说内容不居中。 – Cassie

你能否请添加一个片段？除非您也发布相关代码，否则不建议使用外部链接... – kukkuz

相关部分是'.wrapper {background} color：#eee; 最大高度：100％; 填充：0 15％; overflow-y：scroll; }' 但似乎下面的人已经发现，它不是CSS搞砸了，而是JavaScript。感谢寿！ – Cassie

问题是包含单个字符框的div使用绝对定位，因此您试图在包含它们的包装器div上使用的任何样式都将被绝对定位覆盖。您可能可以更改写入绝对位置的javascript，以便将包装盒中的盒子居中放置，或者可以填充包装器。我正在玩弄数字，并有一些盒子在包装div中居中，但是当它调整大小时，javascript会重写位置。我会用bootstrap来制作这个页面，而不是使用javascript来重新定位调整大小。

来源

2016-09-15 04:54:09 Brian

Ahhhh我明白了，谢谢！是的，这是有道理的。我没有写javascript代码，不幸的是，不知道关于js或bootstrap的任何内容，但感谢您的帮助！ – Cassie

好吧，我试图填充它，而它的工作原理是可见的，当它的大小改变填充改变，所以它将不得不被固定在JavaScript的写位置的div包含字符信息。 – Brian

啊，呃！谢谢！！时间去学js我想，哈哈。 – Cassie

另一种方法是

1）在您的包装股利和设置文本对齐中心

2）对于每一个字符框卸下填充，我不知道你是使用JavaScript什么。如果javascript没有其他用途，除了使这些框水平居中，您可以将其删除。

.chara移除浮子中心，除去高度，添加显示内联块，添加填充25像素0

3）.charaimg除去的相对位置，除去顶部，取出左

4）.charatitle除去高度，去除绝对位置，除去底部0

5）在你的HTML切换.charaimg和.charatitle

这应该做的。

而且对于将来的问题，如果你可以将代码放在codepen或jsfiddle中，它会有很大的帮助。它帮助那些帮助你的人更容易。

来源

2016-09-15 06:45:59 Dr3am3rz

JavaScript实际上是用于过滤代码的！目前没有工作，因为我没有设置标签。无论如何谢谢你的帮助！我已经设法使用div解决方案中的div工作:)。我会记住，以备将来使用。谢谢！！ – Cassie

没问题... =） – Dr3am3rz

CSS - 需要帮助将流体宽度内的内容水平居中div

回答

相关问题