我怎样才能轻松地在图像中间制作一个文本标题

Question

好的，所以我一直在对我的网站进行一些翻新，我正在努力使它在主页上显示多个图像，我希望当你将鼠标悬停在图像上时，它会模糊，文本会出现在图像的中心。我已经能够使图像模糊，但问题是，所有的教程和问答；A在论坛上，我发现使用了绝对定位。

当我这样做的时候，我会把所有的图像叠在一起。然后，我在每个图像周围放置div，并使图像相对定位。结果是一样的。我在验证器中检查了我的代码，结果没有错误。我真的需要一些帮助。

这是我当前的设置（图像在我想要的地方，悬停时会模糊）https://jsfiddle.net/u9smc561/这是我的HTML

 <!-- title div -->       
 <div id="head">
     <img src=http://www.mem3500films.minksfamily.com/pic/title.png alt="title" class="M35F">
 </div>
 <!-- menu bar line for anything bigger than 800px -->
 <div class="menuBar line">
     <img class='menu home' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
     <img class='menu about' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
     <img class='menu comment' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
     <img class='menu pic' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"> 
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
     <img class='menu active' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">
 </div>

 <!-- menu bar line for anything smaller than 800px -->
 <div class="smenuBar" style="font-size: 2px;">
     <nav>
         <ul>
            <li class="line">
               <img class='menuPic menu' src=http://www.mem3500films.minksfamily.com/pic/mobileMenu.png alt="Menu">
               <ul class="selector"> 
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';"></li>
               </ul>
           </li> 
           <li class="close">
           <img src=http://www.mem3500films.minksfamily.com/pic/close.png alt="Close" style="margin-top: 5px;">
           </li>
        </ul>
    </nav>
 </div>



 <!-- Explanation area -->
 <br>
 <br>MEM 3500 Films is a collection of stop-motion animated videos. 
 <br>To learn more about MEM 3500 Films check out the About Page.
 <br>Just click on the movie poster to go to that movies page where you can watch it.      

 <!-- main div section with the posters -->
 <div style="margin-left:0%; margin-right:0%; width:100%; text-align:left;font-size: 25px">
     <br>
     <br>
     <div class="left">
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tcb.png alt="The Coffee Break" />
           <br>
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tvsr.png alt="tvsr" />
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/lt.james.png alt="Lt. James">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TRR.jpg alt="The robbers race">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TFP.jpg alt="The French Plane">
     </div>

     <div class="right">
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/MKI6.png alt="MKI6" />
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TPSPoster.png alt="tps">
            <br>
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/ag.jpg alt="The Air-to-Ground Attack">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/tcp.jpg alt="The Counterfeiters">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/mem3500films.jpg alt="mem 3500 films">
     </div>     
     <br> 
     <br>
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br>
     <br> 
     <br> 
     <br> 
     <br> 
     <br>  
</div>       
     <!-- footer credits -->
     <div style="width:100%; text-align:center; font-size: 25px;">
        <br>
        <footer style="">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. <a href="http://www.lego.com/">LEGO.com</a> 
           <br>
           <p style="margin: 0;">
             <a href="http://jigsaw.w3.org/css-validator/check/referer">
               <img style="border:0; width:88px; height:31px; margin: 10px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
             </a>
           </p>
        </footer>
     </div> 

还有我的CSS

/* makes the  stuff for the tall posters */
.poster {
     -webkit-transition: -webkit-filter 0.4s;
        -moz-transition: -webkit-filter 0.4s;
         -ms-transition: -webkit-filter 0.4s;
          -o-transition: -webkit-filter 0.4s;
             transition: -webkit-filter 0.4s;
     width: 100%;
     border-radius: 15px;
     max-width: 450px;
     max-height: 601px;
}
.poster:hover{
    -webkit-filter: blur(7px);
    filter: blur(7px);
}

/* makes the  stuff for the wide posters */
.poster1 {
     -webkit-transition: -webkit-filter 0.3s;
        -moz-transition: -webkit-filter 0.3s;
         -ms-transition: -webkit-filter 0.3s;
          -o-transition: -webkit-filter 0.3s;
             transition: -webkit-filter 0.3s;
     width: 100%;
     border-radius: 15px;
     max-width: 450px;
     max-height: 260px;
}
.poster1:hover{
    -webkit-filter: blur(7px);
    filter: blur(7px);
}



/* the main div holders for the posters */
.left {
    width: 49%;
    display: inline-block;
    margin-left: 1px;
    text-align: right;
}
.right {
    width: 49%;
    display: inline-block;
    margin-right: 0px;
    text-align: left;
}
  /* the menu bar stuff */
@media only screen
and (min-width : 801px) {
.menuBar {    
     display: block;
}
.smenuBar, .close{    
     display: none;
}
/* makes sure the buttons are not to big */
.home {
    width: 10.1%;
    max-width: 107px;  
}
.about {
    width: 11.1%;
    max-width: 117px;  
}
.comment {
    width: 16.7%;
    max-width: 173px;  
}
.pic {
    width: 16.8%;
    max-width: 174px;  
}
.active {
    width: 16.1%;
    max-width: 167px;  
}
.blank {
    width: 1%;
    max-width: 3px;
    max-height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* makes the hover effect for the menu buttons */
.menu {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: -webkit-filter 0.5s; /* Safari */
    -moz-transition: -webkit-filter 0.5s;
    -ms-transition: -webkit-filter 0.5s;
    -o-transition: -webkit-filter 0.5s;
    transition: -webkit-filter 0.5s;
}
.menu:hover {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-filter: invert(1); /* Safari */
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);
}
}
/* end of computer menu bar config */

/* start of mobile menu config */
@media only screen
and (max-width : 800px) {
/* stuff to make sure the other menu doesn't show */
.menuBar {    
     display: none;
}
.smenuBar, .close {    
     display: block;
}
.menuPic {
     width: 90%;
     max-width: 143px;
}
/* stuff to make sure there isn't indenting */
li {
     list-style-type: none;
     padding: 0;
}
ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
}

/* drop down part of the menu stuff */
nav ul ul {
     height: 0px;
     overflow: hidden;
     -webkit-transition: height 0.5s; /* Safari */
        -moz-transition: height 0.5s;
         -ms-transition: height 0.5s;
          -o-transition: height 0.5s;
             transition: height 0.5s;
}
    nav ul .line:hover > ul {
        height: 335px;
    }
    nav ul .line:active > ul {
        height: 335px;
    }
    nav ul .line:hover + .close {
        height: 52px;
    }
    nav ul .line:active + .cose {
        height: 52px;
    }

.close {
    text-align: center;
    background:rgba(0,0,0,0.8);
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s; /* Safari */
       -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}
/* makes the hover effect for the menu buttons */
.menu {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: -webkit-filter 0.5s; /* Safari */
    -moz-transition: -webkit-filter 0.5s;
    -ms-transition: -webkit-filter 0.5s;
    -o-transition: -webkit-filter 0.5s;
    transition: -webkit-filter 0.5s;
}
.menu:hover {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-filter: invert(1); /* Safari */
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);
}
}
.selector {
      width: 100%;
      background-image:url('pic/wline.jpeg');
      padding: 0;
}

/* end of menu config */ 


/* sets the body properties */
body {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg');
    background-color: #ffd700;
    text-align:center; 
    font-size: 25px;
}

/* the title attributes */ 
body{margin:0;padding:0}
#head {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg');
    background-repeat:repeat;
    width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}  
.line {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg');
    background-repeat:repeat;
    width: 100%;
}

/* makes sure that the website title is not to big */ 
.M35F {
    width: 100%;
    max-width: 905px; 
    margin-top: 20px;
    margin-bottom: 20px;
}

/* makes sure links never get underlined */
a {
    text-decoration:none;
}
/* gives the footer a background image */
footer {
    background-image:url('pic/white.jpeg');
    background-repeat:repeat;
    text-align: left;
    background-color: #FFFFFF;
    color: #888888;
    font-size: 25px;
}

在我目前的设置中，我有它，所以图像会随着窗口的大小而调整大小，然后在某个大小下停止变大。这现在运行良好，我希望它最终能够做到这一点。

但我已经尝试了很多方法来实现这一点，并花了几个小时（实际上），但无论我做了什么，似乎都不起作用。我正在拍摄的是不是连CSS和HTML都不可能？

Answer 1

记住一个重要的概念。绝对定位的元素相对于第一个位置不同于"静态"的ANCESTOR进行定位因此，要定位你的"字符串"，你需要

• 将图像包装在div中
• 使div为"position:relative"
• 将文本放在div、span或其他容器中
• 使容器处于"位置：上方"

这样一来，您就不会有图像重叠的问题。

Answer 2

.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}

这将使其自身位于垂直中心。

将以下内容添加到海报中：

text-align:center;