Html 如何将此图像和它居中'；s文本

我的问题是我无法将此图像居中。我尝试了边距：0和绝对位置，但似乎没有任何效果。对于html和css，我算是个新手。我已经清除了试图将其从html和css集中的尝试

我希望图像居中，即使当网站窗口宽度改变，使填充不起作用

这是我的CSS

/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}

img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

HTML

非大蜗牛

此时，图像如下所示：

您可以尝试一些东西

---

我已经添加了一个

图

，并将文本定位在

绝对

位置

相对

，而不是

容器

一般来说，您正在寻找

margin-left: auto;
margin-right: auto;

将块级元件水平居中放置在其容器内

---

但是请注意，在其包含块中添加float和position会使问题变得复杂，因此请尽量避免使用它们，除非您确实需要它们。

我会尝试使用以下样式进行标记

.container {
    width: 100%;
}

.imagetext {
    width: 5%;
    font-size: 18px;
    margin:0;
}

img { 
    margin:0;
    padding-right: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}

---

您有很多错误和多余的代码。我建议你读一些关于HTML、CSS的书来提高你的水平

下面是一个用最少代码简单解决问题的示例。我们添加了图像包装器

.image\u包装器
，它将图像和文本居中放置

CSS


.image\u包装器{
文本对齐：居中；
}
.imagetext{
字号：18px；
}
img{
填充物：5px；
} /代码> 您可能想考虑将您的图像及其关联文本打包在<代码> <代码>中，以将其与页面文本的其余部分分开。这还允许您将两个元素居中，而不考虑页面宽度。下面是一个例子：



.container{
浮动：左；
位置：相对位置；
宽度：100%；
左：0%；
右：0%；
}
.imagecontainer{
宽度：75%；
高度：自动；
保证金：0自动；
位置：相对位置；
}
.imagecontainer img{
宽度：100%；
高度：自动；
右侧填充：5px；
右侧填充：5px；
垫底：15px；
}
.imagecontainer.imagetext{
宽度：20%；
身高：100%；
位置：绝对位置；
排名：0；
右：0；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。艾蒂安在马萨努克。埃尼安在乌拉姆科珀酒后驾车。克拉斯·索达莱斯，达比布斯·朗卡斯的埃尼姆，尼西·努拉·达比布斯·埃拉特，坐在猫咪的阿梅特·马蒂斯·伊普苏姆·埃尼姆。从兽人身上除掉兽人，威尼斯的欧盟封建主义者坐在那里，温文尔雅的兽人。orci-massa accumsan Curabitur orci-massa，nec的爱神之命。埃尼安·艾尔纳扫描电镜。维尼那人坐在一个拍卖人的座位上。这是一个很好的例子。直径为1.5毫米的大玻璃。南斯克利斯克广场乌兰科佩尔圣地。这是一句名言

非大蜗牛
Lorem ipsum dolor sit amet，是一位杰出的献身者。艾蒂安在马萨努克。埃尼安在乌拉姆科珀酒后驾车。克拉斯·索达莱斯，达比布斯·朗卡斯的埃尼姆，尼西·努拉·达比布斯·埃拉特，坐在猫咪的阿梅特·马蒂斯·伊普苏姆·埃尼姆。从兽人身上除掉兽人，威尼斯的欧盟封建主义者坐在那里，温文尔雅的兽人。orci-massa accumsan Curabitur orci-massa，nec的爱神之命。埃尼安·艾尔纳扫描电镜。维尼那人坐在一个拍卖人的座位上。这是一个很好的例子。直径为1.5毫米的大玻璃。南斯克利斯克广场乌兰科佩尔圣地。这是一句名言

实际上，您只需对图像应用“显示：块；”+“边距：0自动；”


/*图像和文本设置容器*/
.集装箱{
浮动：左；
位置：相对位置；
宽度：100%；
左：0%；
右：0%；
}
.imagetext{
文本对齐：左对齐；
宽度：5%；
位置：绝对位置；
顶部：8px；
右：60px；
字号：18px；
}
img{
/*添加此项以使其居中*/
显示：块；
保证金：0自动；
/*添加此项以使其居中*/
右侧填充：5px；
右侧填充：5px；
垫底：15px；
}

非大蜗牛
你能发布一张它应该是什么样子的图片吗？是的，我试过了，但它不起作用。谢谢你的回答，如果你能给我一个更详细的代码示例+解释它应该是什么样子，我可以帮助你更好；-）增加了左浮动；因此，文本从div+周围消失，并做了一些小的调整，现在它是完美的。再次感谢，但不需要更多帮助。：）
/* image and text setup container */
.container {
position: relative;
width: 100%;
}

.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
color: #fff;
right: 80px;
font-size: 18px;
}
figure { position: relative; width: 400px; margin: auto; /* the width of your image */}
img { 
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}

margin-left: auto;
margin-right: auto;

.container {
    width: 100%;
}

.imagetext {
    width: 5%;
    font-size: 18px;
    margin:0;
}

img { 
    margin:0;
    padding-right: 5px;
    padding-right: 5px;
    padding-bottom: 15px;
}