首页 \ 问答 \ 带有标题的随机图像(Random image with caption)

带有标题的随机图像(Random image with caption)

我有一系列的图像 - image1到image12。 我使用PHP来随机生成数字,导致页面加载后出现随机图像。

url('img/home/hero-img/hero-img-<?php echo rand(1, 12) ?>.jpg')

每幅图像都有一个类似“这是向日葵”的标题。

我想说,如果随机数是x,那么生成的标题应该引用x

使用二维数组来存储字幕和图像是否更好? 这样,当图像被选中时,标题应该是正确的。


I have a series of images - image1 to image12. I use PHP to randomly generate the number, resulting in a random image once the page loads.

url('img/home/hero-img/hero-img-<?php echo rand(1, 12) ?>.jpg')

Each image has a caption like "This is a sunflower".

I am trying to say that if the random number is x then the caption generated should refer to x

Is it a better idea to use a 2D array to store captions and images? That way when an image is selected the caption should be correct.


原文:https://stackoverflow.com/questions/40975520
更新时间:2023-02-18 20:02

最满意答案

要将文本居中对齐,只需添加正确的css样式,如下所示:

<td style="text-align:center;white-space:nowrap">This text will be at center</td>

祝你好运!


To center align text inside a just add the proper css style as shown below:

<td style="text-align:center;white-space:nowrap">This text will be at center</td>

Goodluck!

相关问答

更多
  • 已解决: 此问题已在Windows 10上的Internet Explorer的当前预览版本中得到解决。您现在可以通过Windows或Mac OS X通过http://remote.modern.ie对其进行测试 。 如果您需要IE 11(及以下版本)支持,那么前面的解决方案仍然适合您。 一般来说,表格单元的尺寸很大程度上取决于其内容。 在这种情况下,我们可以看到伪元素与共享单元格容器中的相邻内容的高度相同。 这是Internet Explorer理解100%的意思。 您的伪元素绝对定位,并受相对定位的表格 ...
  • 我能看到这样做的唯一方法是修复高度并添加overflow:hidden到p标记中。 但是,Outlook不支持溢出,所以这在这里没有帮助。 The only way I could see doing this would be to fix the height and add overflow:hidden to the p tag. However overflow is not supported on Outlook, so this won't help here.
  • 要将文本居中对齐,只需添加正确的css样式,如下所示: This text will be at center 祝你好运! To center align text inside a just add the proper css style as shown below: This text will ...
  • 尝试在p类上设置max-height: 250px 。 Try setting max-height: 250px on your p class as well.
  • 是 您需要使用td:nth-child(n)属性和table-layout: fixed属性 检查这个http://jsfiddle.net/Pv3Zk/347/ Yes You need to use td:nth-child(n) property and table-layout: fixed property Check this http://jsfiddle.net/Pv3Zk/347/
  • 以下是如何将图像放在的中间: http : //jsfiddle.net/zLS8J/6/我修改了表格和css,这样你就可以清楚地看到边框了。 你应该关注的主要部分是text-align:center;的css text-align:center; Here is how to put the image in the middle of the : http://jsfiddle.net/zLS8J/6/ I modified the table and css so you could ...
  • 我想你有他们切换.. foreach(pq('.A2') as $tag) { $tds = pq($tag)->find('td'); } 为了从每个td获得一个值,你可以在里面迭代它: foreach(pq('.A2') as $tag) { foreach(pq($tag)->find('td') as $td) { // stuff } } I guess you have them switched.. foreach(pq('.A2') as $tag) { ...
  • 你只需要摆脱这里的白色空间 table td > div { overflow: hidden; white-space: nowrap; } 我添加了colgroups。 它们更适合在列中设置宽度并避免出现问题 DEMO You just needed to get rid of the white-space here table td > div { overflow: hidden; white-space: nowrap; } and I added colgroups ...
  • 您需要为.truncated设置max-width 。 由于它们没有缩短,它们会自动伸展到最大宽度。 https://jsfiddle.net/yak613/jsdwcox9/ .truncate { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 150px; } This is what I ended up doing. I used some of the info from t ...
  • 我相信你打算使用jQuery的prev()方法。 此外,由于您的表是动态生成的,因此在执行JavaScript时它可能不存在于DOM中。 您可以通过将click事件绑定到不同的(父级和静态)元素而不是动态表来委派您的click事件 。 下面,我将事件绑定到document本身,但如果存在,则可以使用更具体的元素。 $(document).on('click', '#myTable input', function (event) { var prevCell = $(this).closest('t ...

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。