个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
26
4
我创建了一个简单的基于 float 的横幅，带有这样的图 block :
My code on jsfiddle ,
但是我在每个图 block 中居中文本时遇到了一个大问题。我想让所有“示例文本”文本在每个图 block 中居中(水平和垂直)，但我不知道如何实现。
我尝试了很多方法，但文本从来没有很好地居中。我该怎么做？
我也会在这里粘贴我的代码:
HTML文件
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>
<div id="page-content">
<div id="banner-wrapper">
<div class="column left-col">
<div class="block block-25">
<div class="overlay"></div>
<div class="block-content">Sample text</div>
</div>
<div class="block block-24">
<div class="block-content">Sample text</div>
</div>
<div class="block block-22">
<div class="block-content">Sample text</div>
</div>
<div class="block block-21">
<div class="block-content">Sample text</div>
</div>
</div> <!--Column left END -->
<div class="column right-col">
<div class="block block-23">
<div class="block-content">Sample text</div>
</div>
</div><!--Column right END -->
</div> <!--Banner wrapper END -->
</div>
</body>
</html>
CSS 文件
body {font-family: margin:0;}
#page-content {max-width: 1220px; margin: 0 auto; position:relative;}
/* banner */
#banner-wrapper {overflow:hidden; padding:0px; margin: 0px;}
.column {height:442px;float:left;}
#banner-wrapper .left-col {width: 65.5%}
#banner-wrapper .right-col {width:34.5%}
.horizontal-line-top {height:4px; background-color: #3e7213; border: 0px;}
.horizontal-line-bottom {height:4px; background-color: #609732; border: 0px;}
.block {position:relative;float:left;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid #fff;}
.block-25 {background-color:blue;border-left: 0px;border-top:0px; width:40%; height:50%;}
.block-24 {width:60%;background-color:blue; height:50%;border-top:0px; }
.block-22 {border-bottom:0px; border-left: 0px;width:28%;;background-color:blue; height:50%;}
.block-21 {border-bottom:0px;width:72%;background-color:blue; height:50%;}
.block-23 {border-right: 0px;width:100%;background-color:blue; height:100%;border-top:0px; border-bottom:0px;}
.block-content { position: absolute;color:#fff;visibility:hidden;float:none; margin:0 auto;}
.block:hover > .overlay {float:left; width:100%;height:100%;background-color:#000;opacity:0.5;}
.block:hover .block-content {visibility:visible;}
最佳答案
尝试使用此 CSS。这将解决问题。
.block-content{
position: relative;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
我试过将它放入内联。如果您将它放在外部表中，请注意矛盾。这运作良好。
关于html - CSS float mosaic - 文本居中问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37122743/
26
4
0
我在 Mosaic Decisions 中使用数据流，并且使用 MySQL 编写器节点。我要写的结果集有一个字段 inserted-time .但我想跳过此列中的值，并希望使用为 DB 表中该列设置的
我正在使用镶嵌决策数据流功能从 Azure blob 读取文件，进行一些转换并将该数据写回 Azure。它工作正常，除了在我给出的输出文件路径中，它创建了一个文件夹，我可以看到许多文件的名称中带有一些
mosaic decision提供了哪些不同类型的参数？input、calculated、sql和global variables有什么区别？ 最佳答案 Mosaic有两类参数: 1。系统参数 - 这
我发现的最好的马赛克代码你可以在这个页面看到: https://github.com/codebox/mosaic 但是，该代码在我的 Windows 计算机上运行不佳，而且我认为该代码对于它应该做的
我正在使用 vcd::mosaic 生成马赛克图。但是我给出的因素的文本很长(削减它们不是一种选择，并且在如此多的情况下，引入 \n 似乎令人生畏)，因此文本中有重叠，我一直无法强制标签垂直于轴。 这
我正在尝试支持最初使用 GWT 2.4 和 GWT Mosaic v0.4.0 开发的旧版 Java Web 系统。我尝试升级 GWT 版本，并使用 GWT 2.5.0 成功编译项目，但是当我尝试使用
我有兴趣使用这个MosaicJS plugin 。这些说明看起来很简单，所以我尝试复制基本实现。 $('#myMosaic').Mosaic();
我必须在网页上编写一个大图片马赛克，我想知道编写它的最佳方法是什么，因此该解决方案的编程和以后维护/更改它不会很复杂。 这里是马赛克的设计，每张图片都可能会变，黑白和彩色。 我在考虑 3 种不同的方法
前几天看见开源项目效果好赞，看了下代码，实现大致就是在原界面之上覆盖一成自定义的view，获取到点击的那个view的内容(bitmap)，然后在覆盖的那个自定义view的特定位置画出来，之后就是对这
我正在使用 R 3.2.2 并安装了 mosaic 包。然后，我使用了 fetchData 函数，如下所示: data<-fetchData(1,c("Web_scraping","Data_mini
我正在使用 Sonata Admin，并且有一个列表和马赛克 View 。如何默认选择马赛克 View ？ 我不想隐藏 ListView ，只需默认选择马赛克 View 即可。 最佳答案 Admin
我在这个网络元素中遇到了与 CSS 相关的问题。该网站是用 PHP 编码的，但在这个例子中我只是发布了相关的 HTML。 我已经编译了我的 CSS(从 .SCSS 编译)并附上了整个 CSS 文件。
如何在鼠标悬停时将封面覆盖应用到马赛克元素:http://tympanus.net/Development/GridLoadingEffects/index.html 我试图达到的效果可以在这里看到:
Take a look at the images in this link 我正在使用相同的 Mosaic Flow 插件构建一个类似的页面，我的页面与上面的示例页面之间的唯一区别是我通过 AJAX
我创建了一个简单的基于 float 的横幅，带有这样的图 block : My code on jsfiddle , 但是我在每个图 block 中居中文本时遇到了一个大问题。我想让所有“示例文本”文
我有 4 个相同形状的方形阵列 array1 = 1*np.ones((10,10)) array2 = 2*np.ones((10,10)) array3 = 3*np.ones((10,10))
在新版本的 gmail 上，有一个很酷的 imageView，可以在其中显示多个联系人图像(链接 here 例如)。 例如，如果有人给我发了一封电子邮件，我只能看到他的图片: ####### #
好的，我正在使用 Mosaic (用于悬停文本等的 jQuery 插件)无论如何，我已经可以正常工作了，但现在我的问题是文本与我想要做的正确对齐。我试图让单词:“sale items”以非常小的空间出
我正在使用 Java 高级成像。我已经有了这些图 block ，想将所有图 block 放在一个 PlanarImage 中。下面的代码返回以下错误消息: 错误:一个工厂因操作“马赛克”而失败线程“m
我正在将Mosaic Decisions用于必须每天运行的特定数据管道。我有一个客户，其文件位置每天都会根据当前日期在blob 容器中发生变化。 例如，文件 sales.xlsx 的路径如下 dail
我是一名优秀的程序员,十分优秀！