中心的 HTML 对齐图例元素在 Internet Explorer 和 Firefox 中不起作用

Question

我想在图例的中心放置一张图片。这是链接http://codepen.io/e6z6a6z/details/IJnoF .. 这在 chrome 中运行良好，但在 Firefox 和 Internet Explorer 中，图像向左浮动。我尝试给我的图例 100% 保持它的文本对齐中心，但然后边框顶部消失了..我想要相同的边框宽度和图像之间..请帮助

Answer 1

将align="center" attribute 添加到图例标签。

Answer 2

你必须给元素，其中有 text-align: center; 100% 宽度，它必须是块元素。之后，容器内的元素应该居中。

legend {
  display: block;
  width: 100%;
  text-align: center;
}