如何在图像中间轻松制作文字标题 [英] How can I easily make a text title in the middle of an image
本文介绍了如何在图像中间轻松制作文字标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好了，所以我一直在做一些修缮到我的网站，我试图让它尽量在主页上您可以看到几个图像和我希望发生的是，当你的悬停在图像上它模糊和且文字会显示在图片中心。我已经能够使图像模糊，但事情是所有的教程和论坛上的Q& A，我发现使用绝对定位。
Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image. I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning.
当我这样做，虽然我结束了所有的图像堆叠在彼此的顶部。然后我把divs围绕每个图像，使图像相对定位。结果是一样的。我检查我的验证器中的代码，它出来没有错误。我真的需要一些帮助。
When I do that though I end up with all the images stacked on top of each other. I then put divs around each image and made the images relatively positioned. The result was the same. I checked my code in validators and it came out with no errors. I could really need some help.
这是我当前的设置（图像是我想要的，他们在悬停模糊）
https://jsfiddle.net/u9smc561/
这是我的HTML
Here is my current setup (the images are where I want them and they blur on hover) https://jsfiddle.net/u9smc561/ Here is my 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;
}
在我当前的设置中，我有它的图像大小与窗口，然后停止越来越大在一定的大小。这工作正常现在，我希望它能够做到这一点。
In my current setup I have it so the images resize with the window then stop getting bigger at a certain size. This works fine now and I want it to be able to do this in the end.
但我已经尝试SOOOO许多东西让这个工作和花费几个小时（字面上），但无论我做了什么，似乎并不工作。是什么我拍摄甚至不可能与CSS和HTML？
But I have tried SOOOO many things to get this to work and spent hours (literally) but no matter what I've done it doesn't seem to work. Is what I am shooting for not even possible with CSS and HTML?
推荐答案
.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}
这将定位在垂直中心。
向.poster添加以下内容：
add the following to .poster:
text-align:center;
这篇关于如何在图像中间轻松制作文字标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
