1

我不是 CSS Ninja，没有你的天才解决方案，我需要为以下问题编写一些服务器端解决方案：

  • 我有一个图像。图像的大小是可变的。它可以是 250x380 或 640x480 或任何尺寸。
  • 我必须在图像的中心放置一些文本。它必须水平和垂直对齐。
  • 我需要一个 HTML+CSS 解决方案……不管在客户端什么都行。
4

3 回答 3

3

这是使用 HTML、CSS 和 JavaScript 完成您所要求的事情的一种方法：

  1. 将您想要的标签放在图像的属性中，例如alt属性
  2. 编写一个创建div元素标签并将其放置在图像顶部的函数
  3. 在您希望在其上添加标签的所有图像上运行该功能

这是一个例子：http: //jsfiddle.net/Codemonkey/YnMfM/2/

我的示例需要 JavaScript，但使用非强制性的 jQuery 库。您可以使用纯 JavaScript 或任何其他库

于 2012-06-15T14:05:51.927 回答
3

这是一种仅使用 HTML 和 CSS 来完成您所要求的事情的方法。它比我的其他解决方案更脏，但无论如何它有点酷。

  1. 将图像放入divwithposition: relative
  2. 在与图像相同的 div内放置一个divinside a tableinside adiv
  3. 使用div_position: absolute
  4. 将表格设置为 100% 宽度和高度，并将其文本对齐和垂直对齐设置为中间
  5. div将表格内部显示为inline-block并根据需要设置样式

这是一个例子：http: //jsfiddle.net/Codemonkey/a52qx/1/

我不能保证浏览器的兼容性。我敢打赌 Internet Explorer 会大吃一惊，但我无法测试它，因为我在 Ubuntu 机器上。

于 2012-06-15T14:29:43.287 回答
0

Codemonkey/Hubro 的仅 HTML/CSS 解决方案有效，但您实际上并不需要使用表格。您可以将相关的 div 设置为display:tableand display:table-cell。

这是他没有表格的例子：

https://jsfiddle.net/aphidesign/cwosvp9b/

于 2015-03-12T08:21:59.603 回答