Html 试图在图像上覆盖span和h2，但未成功_Html_Css

Html 试图在图像上覆盖span和h2，但未成功

html css

Html 试图在图像上覆盖span和h2，但未成功,html,css,Html,Css,我试图让一个跨度像一个横幅和一些中心对齐的h2在一个图像画廊，但不是做得很好这是一个速成班，作业将在周三晚上完成，我将在今晚和明天继续调试代码，但我想我会利用现有资源询问社区非常感谢您的帮助。我甚至不需要“正确的答案”，我只需要一些指导我应该做什么我如何改正我的错误 <div class="sizing"> <div class="maincontent"> <section> <ul> &l

我试图让一个跨度像一个横幅和一些中心对齐的h2在一个图像画廊，但不是做得很好

这是一个速成班，作业将在周三晚上完成，我将在今晚和明天继续调试代码，但我想我会利用现有资源询问社区

非常感谢您的帮助。我甚至不需要“正确的答案”，我只需要一些指导我应该做什么

我如何改正我的错误

<div class="sizing">
<div class="maincontent">
    <section>
        <ul>

            <li class="gallery"> 
                <img src="assets/images/holding-and-point-on-tablet-pc-P4YGEVW.jpg" alt="Hangman">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/game-PJVG95Z.jpg" alt="RPG Game">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/concentrated-man-sitting-at-home-indoors-play-PZGRWH7.jpg" alt="Trivia Game ">
                <span><h2>Hangman</h2></span>
            </li>
            <li> 
                <img src="assets/images/statistics-strategy-analysis-diagram-information-P9KEFGF.jpg" alt="Reutgers">
                <span><h2>Hangman</h2></span>
            </li>
            <li>
                 <img src= "assets/images/note-tied-to-rock-PUJU6N2.jpg" alt="Rock Paper Scissors">
                 <span><h2>Hangman</h2></span>
            </li>
        </ul>
    </section>
</div>
</div>

.sizing {
max-width: 960px;

margin: 0 auto;
}

.maincontent {
    background-color: #FFFFFF;
    float: left;
    max-width:650px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom:30px;
}

img {
height:"";
width:40%;
float: left;
display: inline-block;
position:relative;
margin-right:2px;
margin: 0 auto;
margin:30px;
border:1px solid #ddd;
}


.gallery {
position:relative;
 }
.gallery span {
position:absolute;
bottom:20px;
left:0px;
background: #4aaaac;
}




刽子手


刽子手


刽子手


刽子手


刽子手


.尺寸{
最大宽度：960像素；
保证金：0自动；
}
.主要内容{
背景色：#FFFFFF；
浮动：左；
最大宽度：650px；
边缘顶部：50px；
边缘底部：50px；
填充底部：30px；
}
img{
高度：“；
宽度：40%；
浮动：左；
显示：内联块；
位置：相对位置；
右边距：2px；
保证金：0自动；
利润率：30像素；
边框：1px实心#ddd；
}
.画廊{
位置：相对位置；
}
.长廊跨度{
位置：绝对位置；
底部：20px；
左：0px；
背景：#4aaaac；
}

在

img

和

span

标记周围应用div，这样有助于应用绝对定位并重叠h2标记

    [![<style>

.sizing {
max-width: 960px;

margin: 0 auto;
}

.maincontent {
    background-color: #FFFFFF;
    float: left;
    max-width:650px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom:30px;
}

img {
height:"";
width:40%;
float: left;
display: inline-block;
position:relative;
margin-right:2px;
margin: 0 auto;
margin:30px;
border:1px solid #ddd;
}


.gallery {
position:relative;
 }
.gallery span {
position:absolute;
bottom:20px;
left:0px;
background: #4aaaac;
}
.sp{
position:absolute;
top:24%;
left:14%
}
</style>

<div class="sizing">
<div class="maincontent">
    <section>
        <ul>

            <li class="gallery"> 
               <div>
                <span><h2>Hangman1</h2></span>
                </div>
            </li>

            <li>
                 <div   style="width:200px;height:200px;background-color:green;">
                 <span class="sp"><h2>Hangman2</h2></span>
                 </div>
            </li>
        </ul>
    </section>
</div>
</div>][1]][1]

[[
.尺寸{
最大宽度：960像素；
保证金：0自动；
}
.主要内容{
背景色：#FFFFFF；
浮动：左；
最大宽度：650px；
边缘顶部：50px；
边缘底部：50px；
填充底部：30px；
}
img{
高度：“；
宽度：40%；
浮动：左；
显示：内联块；
位置：相对位置；
右边距：2px；
保证金：0自动；
利润率：30像素；
边框：1px实心#ddd；
}
.画廊{
位置：相对位置；
}
.长廊跨度{
位置：绝对位置；
底部：20px；
左：0px；
背景：#4aaaac；
}
.sp{
位置：绝对位置；
最高：24%；
左：14%
}


刽子手1


刽子手2


][1]][1]

在

img

和

span

标签周围应用div，这样有助于应用绝对定位并重叠h2标签

    [![<style>

.sizing {
max-width: 960px;

margin: 0 auto;
}

.maincontent {
    background-color: #FFFFFF;
    float: left;
    max-width:650px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom:30px;
}

img {
height:"";
width:40%;
float: left;
display: inline-block;
position:relative;
margin-right:2px;
margin: 0 auto;
margin:30px;
border:1px solid #ddd;
}


.gallery {
position:relative;
 }
.gallery span {
position:absolute;
bottom:20px;
left:0px;
background: #4aaaac;
}
.sp{
position:absolute;
top:24%;
left:14%
}
</style>

<div class="sizing">
<div class="maincontent">
    <section>
        <ul>

            <li class="gallery"> 
               <div>
                <span><h2>Hangman1</h2></span>
                </div>
            </li>

            <li>
                 <div   style="width:200px;height:200px;background-color:green;">
                 <span class="sp"><h2>Hangman2</h2></span>
                 </div>
            </li>
        </ul>
    </section>
</div>
</div>][1]][1]

[[
.尺寸{
最大宽度：960像素；
保证金：0自动；
}
.主要内容{
背景色：#FFFFFF；
浮动：左；
最大宽度：650px；
边缘顶部：50px；
边缘底部：50px；
填充底部：30px；
}
img{
高度：“；
宽度：40%；
浮动：左；
显示：内联块；
位置：相对位置；
右边距：2px；
保证金：0自动；
利润率：30像素；
边框：1px实心#ddd；
}
.画廊{
位置：相对位置；
}
.长廊跨度{
位置：绝对位置；
底部：20px；
左：0px；
背景：#4aaaac；
}
.sp{
位置：绝对位置；
最高：24%；
左：14%
}


刽子手1


刽子手2


][1]][1]

通过清理代码并将图像设置为

背景图像，而不是使用单独的img
元素，您可以非常轻松地实现这一点
编辑：在使用无序列表的版本中，如果您需要的话，这里有相同的原则。图像是占位符，每个图库项目的宽度/高度可以轻松调整：

。调整大小{
最大宽度：960像素；
保证金：0自动；
}
.主要内容{
背景色：#FFFFFF；
浮动：左；
宽度：100%；
}
.画廊{
位置：相对位置；
显示：内联块；
宽度：200px；
高度：150像素；
利润率：20px；
}
#画廊优先{
背景：url（'http://via.placeholder.com/200x150")不重复;；
背景尺寸：封面；
}
#第二画廊{
背景：url（'http://via.placeholder.com/200x150")不重复;；
}
#第三画廊{
背景：url（'http://via.placeholder.com/200x150")不重复;；
}
#第四画廊{
背景：url（'http://via.placeholder.com/200x150")不重复;；
}
#第五画廊{
背景：url（'http://via.placeholder.com/200x150")不重复;；
}
.长廊跨度{
位置：绝对位置；
背景：#4aaaac；
顶部：65px；
左：0；
文本对齐：居中；
宽度：100%；
}
保险商实验室{
列表样式类型：无；
}



刽子手


刽子手


刽子手


刽子手


刽子手


通过清理代码并将图像设置为背景图像，而不是使用单独的img
元素，您可以非常轻松地实现这一点
编辑：在使用无序列表的版本中，如果您需要的话，这里有相同的原则。图像是占位符，每个图库项目的宽度/高度可以轻松调整：

。调整大小{
最大宽度：960像素；
保证金：0自动；
}
.主要内容{
背景色：#FFFFFF；
浮动：左；
宽度：100%；
}
.画廊{
位置：相对位置；
显示：内联块；
宽度：200px；
高度：150像素；
利润率：20px；
}
#画廊优先{
背景：url（'http://via.placeholder.com/200x150")不重复;；
背景尺寸：封面；
}
#第二画廊{
背景：url（'http://via.placeholder.com/200x150")不重复;；
}
#第三画廊{
背景：url（'http://via.placeholder.com/200x150""不重复"