个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
文本左对齐，但我需要它在
24
4
我正在做一场噩梦，试图让一小段文字位于我页面中心的图像上。我所管理的最接近的是文本框现在稍微居中。
我试图通过使用以图像为背景的 Div 类来完成此操作，并在 div 类“TEST”的段落内使用文本。我这样做是因为我稍后想在悬停时为它设置动画，但目前我只是想让文本位于图像之上!
我以为margin: auto 0;会有所帮助，但它导致了更多问题，所以我将其删除并尝试使用 display: inline; 代替，这让我更接近了。现在我完全没有想法......
这是 p CSS:
p {
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 2px;
line-height: 28px;
text-align: center;
position: absolute;
bottom: 0;
margin: 0;
display: inline;
}
这是 Div CSS 及其类:
div {
height: 200px;
margin: 40px 0 0 0;
position: relative;
}
.TESTimage {
background-image: url("https://eccentric.productions/assets/roundlogo");
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
height: 100px;
}
最后，HTML 的相关部分:
<body>
<div class="TEST">
<p>
Writing
</p>
</div>
</body>
非常感谢任何能帮助我的人，我已经使用 Stack Overflow 多年，但这是我第一次需要发布问题。你们做得很棒!
最佳答案
您必须删除 p 标签中的 position: absolute; 我删除 .test 类中的 background-position: center center; 以便于查看。这里是html代码
<!DOCTYPE html >
<html >
<head>
<style type="text/css">
p {
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 2px;
line-height: 28px;
text-align: center;
bottom: 0;
margin: 0;
display: inline;
}
div {
height: 200px;
margin: 40px 0 0 0;
position: relative;
}
.TEST {background-image: url("https://eccentric.productions/assets/roundlogo");
background-size: 100px;
background-repeat: no-repeat;
height: 100px;
}
</style>
</head>
<body>
<div class="TEST">
<p>
Writing
</p>
</div>
</body>
</html>
希望对你有帮助
关于html - <p> 文本左对齐，但我需要它在 <div> 类中的图像背景之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24935569/
24
4
0
关于strcat函数。 while (*p) p++; 和 while (*++p) ; 两者都有效，但是 while (*p++) ; 不起作用。我认为 first 和 th
" in HTML?(HTML中的““是什么
？)
下面例子中的第一行代码是什么。我看到一个YouTuber在写下面的代码，它显示了一个设计在csswar Challenges中。我也尝试了一下，它很管用。但我以前从未在任何HTML教程上看到过它，我在
vs.
是不间断空格，表示没有换行的空白处。 如果我用 我在两个段落之间有一个空格(更大的间隔)。如果我使用 我在两个段落之间只有一个新行(没有中断)。为什么？ 最佳答案 在 HTML 中
这个问题已经有答案了: Why are these constructs using pre and post-increment undefined behavior? (14 个回答) 已关闭 9
我对编程还很陌生，只是想知道为什么这段代码: for ( ; *p; ++p) *p = tolower(*p); 当 p 指向一个字符串时，可以降低 c 中字符串的大小写吗？ 最佳答案 一般来说，这
代码 int n = 25; int *p = &n; printf("%x\n %d\n %x\n", p, p[0], p[1]); 返回: \ 当然我永远不会这样做，但在 K&R 中声明
所以，我想创建一个简单的程序，返回有关连续素数的计算结果。首先，我创建一个包含所有这些素数的列表，然后尝试计算结果，但这给了我一个超出范围的索引。有人可以帮助我吗？我的程序: primes = []
这个问题在这里已经有了答案: With arrays, why is it the case that a[5] == 5[a]? (20 个答案) 关闭 9 年前。 我想知道 C/C++ 中以下四
我仍在努力理解 *p、&p 和 p 之间的区别。根据我的理解，* 可以被认为是“指向的值”，而 & 可以被认为是“地址”。换句话说，* 保存值，而 & 保存地址。如果这是真的，那么 *p 和 p 之间
你是吗？ [xxxrecipientFirstNamexxx]
和你是吗？ {recipientFirstName}
需要更换 你是吗？ [xxxrecipientFirstNamexxx] 和 你是吗？ {recipientFirstName} 。我尝试使用边界匹配器。但结果并不符合预期。我尝试使用下面的代码 "A
我想按 IsTop 属性升序排序对象，然后按 JobId 属性降序排序: query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p =
在我尝试使用 Apache POI 进行转换的 Excel 文件中，我有一个单元格的数值为 -3.97819466831428，自定义格式为“0.0 p.p.;(0.0 p.p.)”。因此，在 Exc
我想创建一个扩展方法，允许我调用 ToSerializableDictionary(p => p.ID)而不是 .ToDictionary(p => p.ID)在以下 LINQ 上下文中。虽然我不确定
在下面的 HTML 代码上运行此 jQuery 代码会返回不同的结果，我认为它们应该返回相同的值。 jQuery 代码: var counter = 0; $("p").each(function()
在下面的代码片段中，符号 *p 等同于 p[0]，*(p + 1) 等同于p[1]，依此类推。 int* p = new int[3] { 1, 2, 3}; cout << *p << ' ' <<
这个问题在这里已经有了答案: What will happen when I call a member function on a NULL object pointer? [duplicate]
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Undefined Behavior and Sequence Points 按照标准中的定义，E1 +=
" in HTML?(在HTML中“
以下示例中的第一行代码是什么。我看到一个youtube用户写下面的代码，它显示在cssbattle挑战的设计。我也试过，它的作品。但我从来没有见过它在任何HTML教程之前，我在谷歌上搜索它，但它只显示
每当我收到来自 MS outlook 的电子邮件时，我都会收到此标记 & nbsp ; (没有空格)哪个显示为？在 <>. 当我将其更改为 ISO-8859-1 时，浏览器页面字符集编码为 UTF-8
p1
TESTp2
代码: from bs4 import BeautifulSoup soup = BeautifulSoup('p1TESTp2') print soup.div() 结果: [p1, p2] 为什么
我是一名优秀的程序员,十分优秀！