Fatal编程技术网
  • html/
  • Html 如何将文本置于居中图像下方？

Html 如何将文本置于居中图像下方？

html css responsive-design

Html 如何将文本置于居中图像下方？,html,css,responsive-design,Html,Css,Responsive Design,我创建了一个响应性很强的网页，以图像为背景，另一个图像（徽标）以页面为中心 问题是，我想在居中的图像（徽标）的正下方放置一个带有标题的文本。我试着用垫子把它放在上面，但效率很低，反应也不是很灵敏 我想把文本放在居中的图像下面 这是我的代码 @font-face{ 字体系列：“Raleway”； src:url（'assets/font/ralway Thin.ttf'）格式（'ttf'）； } html， 身体{ 保证金：0； 身高：100%； 溢出：隐藏； } 身体{ 背景图片：url（'a

我创建了一个响应性很强的网页，以图像为背景，另一个图像（徽标）以页面为中心

问题是，我想在居中的图像（徽标）的正下方放置一个带有标题的文本。我试着用垫子把它放在上面，但效率很低，反应也不是很灵敏

我想把文本放在居中的图像下面

这是我的代码

@font-face{
字体系列：“Raleway”；
src:url（'assets/font/ralway Thin.ttf'）格式（'ttf'）；
}
html，
身体{
保证金：0；
身高：100%；
溢出：隐藏；
}
身体{
背景图片：url（'assets/image/bg.png'）；
背景尺寸：封面；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景重复：无重复；
}
p{
字体系列：“Raleway”；
颜色：白色；
文本对齐：居中；
填充顶部：60%字体大小：17px；
}
img.ri{
位置：绝对位置；
最大宽度：40%；
排名前10%；
左：10%；
}
img.ri：空{
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
@媒体屏幕和屏幕（方向：纵向）{
p{
字体系列：“Raleway”；
颜色：白色；
文本对齐：居中；
字体大小：14px；
填充顶部：65%
}
img.ri{
最大宽度：75%；
}
}
@媒体屏幕和屏幕（方向：横向）{
img.ri{
最大高度：85%；
}
}

该网站目前正在维护中
试试这个：

<body>    
<figure>
<img class="ri" src="assets/image/logo.png">
<figcaption>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</figcaption>
</figure>
</body>


该网站目前正在维护中
试试这个，我想这就是你想要的

将
徽标
和
文本
包装在
分区中，例如：
并将css应用于此类

CSS

 .wrapper {
   width:100%;
   text-align:center;
   padding-top:15%;
   position:relative;
 }
下面是修改后的片段

@font-face{
字体系列：“Raleway”；
src:url（'assets/font/ralway Thin.ttf'）格式（'ttf'）；
}
html，
身体{
保证金：0；
身高：100%；
溢出：隐藏；
}
身体{
背景图片：url（'assets/image/bg.png'）；
背景尺寸：封面；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景重复：无重复；
溢出：自动；
}
.包装纸{
宽度：100%；
文本对齐：居中；
最高：30%；
位置：相对位置；
}
p{
字体系列：“Raleway”；
颜色：黑色；
文本对齐：居中；
字号：17px；
边缘顶部：5px；
最大宽度：70%；
左边距：自动；
右边距：自动；
}
img.ri{
最大宽度：40%；
}

该网站目前正在维护中


.member{
显示：内联块；
宽度：31%；
垂直对齐：顶部；
文本对齐：居中；
位置：相对位置；
}
.姓名{
显示：内联；
}
.成员img{
宽度：100%；
显示：块；
}

设计
名称描述
我想你想要这样的东西，试试看

@font-face{
字体系列：“Raleway”；
src:url（'assets/font/ralway Thin.ttf'）格式（'ttf'）；
}
html，正文{
保证金：0；
身高：100%；
溢出：隐藏；
}
身体{
背景图片：url（'assets/image/bg.png'）；
背景尺寸：封面；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景重复：无重复；
}
p{
字体系列：“Raleway”；
颜色：#000；
文本对齐：居中；
字号：17px；
}
居中
{
左：0；
右：0；
排名：0；
底部：0；
保证金：0自动；
位置：绝对位置；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}



此网站目前正在维护中
nope不起作用，文本停留在中间顶部而不是图像下方检查我的更新答案。它可以正常工作。图像甚至不在中心。它不工作，顶部的图像和文本之间的间隙太宽。现在可以了，看一看。图像也有响应。是的，图像有响应，但调整大小时图像和文本的位置，它正在向顶端移动，而不是停留在中心水平。这个问题现在已经解决了，我认为这正是你想要的它适用于字体，但图像没有响应您可以使用引导程序生成响应图像或在cssi中为其指定百分比添加最大宽度：100%及其工作方式，但文本和图像不会保持水平居中为什么添加
最大宽度：100%
？