Bootstrap在图片内居中显示文字

图片的父容器position设置为relative。文字position设置为absolute。

.thumbnail {
  position: relative;
}

.caption {
  position: absolute;
 top: 45%;
 left: 0;
  width: 100%;
}

示例:

<!DOCTYPE html>
<html lang="zh">
<head>
 <title>Bootstrap图片内显示文字</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
<style type="text/css">
  .thumbnail {
    position: relative;
    }

    .caption {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    }
 </style>
</head>
<body>
  <div class="row" id="box-search">
  <div class="thumbnail text-center">
    <img src="img/hello_world.png" alt="" class="img-responsive">
    <div class="caption">
      <p>世界很大,我想去看看</p>
    </div>
  </div>
</div>
</body>
</html>

版权声明:著作权归作者所有。

相关推荐

Ubuntu在终端显示Git的分支名

在Ubuntu的~/.bashrc添加代码,用于在终端显示git的分支名# 显示git分支 force_color_prompt=yes color_prompt=yes parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/' } if [ "$color_promp

[译]了解AttnGAN:文字到图像转换器

文字到图像的转换一直令我着迷,最近的AttnGAN论文引起了我的注意。 在这篇文章中,我会试着提供一个直观的说明,希望让你好奇,进一步挖掘:-)。在我们开始实际模型之前,有一些先决条件:1、注意力为了避免重蹈覆辙(并推广我自己的课程),请看我以前的帖子,我在这里提供了一个关于“深度学习中的注意力”的小介绍。2、生成式对抗网络简单地说,一个GAN是两个网络的组合:一个生成器(从噪声中产生有

禁止UITableView选中高亮显示

去掉UITableViewCell的Selection style即可Objective-Ccell.selectionStyle = UITableViewCellSelectionStyleNone; 或者[cell setSelectionStyle:UITableViewCellSelectionStyleNone]; Swift 2cel