如何将文字放在图片的中央？

Question

我正在尝试逐步制作幻灯片图像，现在我想知道如何将文本放置在图像的中心，然后将图像叠加在一个位置上。请看一下我的代码（对不起）我的英语）谢谢。

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #main-menu { position: relative; } #main-menu ul { margin: 0; padding: 0; } #main-menu li { display: inline-block; } #main-menu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*sub-topics*/ #sub-topics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } #sub-topics ul { margin: 0; padding: 0; } #sub-topics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #main-menu li:hover { text-decoration: underline; } /*slideshow*/ #slideshow { position: relative; width: 100%; height: 100%; overflow-x: hidden; } #slider{ overflow-x: hidden; } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } .slide { background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 100%; height: 450px; overflow-x: hidden; } .slide-contain { text-align: center; } 

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <header></header> <nav> <div id="main-menu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li> <a href="" id="mainTopics">Topics</a> <div id="sub-topics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> </ul> </div> </div> </li> </ul> </div> </nav> <div id="slideshow"> <div id="arrow-left" class="arrow"></div> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="arrow-right" class="arrow"></div> </div> <script src="jquery.js"></script> <script src="index.js"></script> <script> </script> </body> </html> 

我正在尝试逐步制作幻灯片图像，现在我想知道如何将文本放置在图像的中心，然后将图像叠加在一个位置上。请看一下我的代码（对不起）我的英语）谢谢。

Answer 1

我向这两个类添加了一些代码。

现在您的标题将在中间

快乐编码

.slide {
    position:relative;
}

.slide-contain {
    position:absolute;
    bottom:50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    background:#efefef;        
}

 body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #main-menu { position: relative; } #main-menu ul { margin: 0; padding: 0; } #main-menu li { display: inline-block; } #main-menu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*sub-topics*/ #sub-topics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } #sub-topics ul { margin: 0; padding: 0; } #sub-topics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #main-menu li:hover { text-decoration: underline; } /*slideshow*/ #slideshow { position: relative; width: 100%; height: 100%; overflow-x: hidden; } #slider{ overflow-x: hidden; } #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } .slide { background-repeat: no-repeat; background-position: center; background-size: 800px 400px; width: 100%; height: 450px; overflow-x: hidden; position:relative; } .slide-contain { text-align: center; position:absolute; bottom:50%; left:50%; transform: translate3d(-50%,-50%,0); background:#efefef; } 

  <header></header> <nav> <div id="main-menu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li> <a href="" id="mainTopics">Topics</a> <div id="sub-topics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> </ul> </div> </div> </li> </ul> </div> </nav> <div id="slideshow"> <div id="arrow-left" class="arrow"></div> <div id="slide1" class="slide"> <div class="slide-contain"> <span>Image One</span> </div> </div> <div id="slide2" class="slide"> <div class="slide-contain"> <span>Image Two</span> </div> </div> <div id="slide3" class="slide"> <div class="slide-contain"> <span>Image Three</span> </div> </div> <div id="arrow-right" class="arrow"></div> </div> 

Answer 2

您的文字已经在背景图片上了。 您只需要添加background-position 。 试试这个代码。

body {
  margin: 0;
}

li,
a {
  text-decoration: none;
  list-style-type: none;
  text-decoration-line: none;
  color: black;
}

/*main-menu*/

#main-menu {
  position: relative;
}

#main-menu ul {
  margin: 0;
  padding: 0;
}

#main-menu li {
  display: inline-block;
}

#main-menu a {
  display: block;
  width: 100px;
  padding: 10px;
  border: 1px solid;
  text-align: center;
}

/*sub-topics*/

#sub-topics {
  position: absolute;
  display: none;
  margin-top: 10px;
  width: 100%;
  left: 0;
}

#sub-topics ul {
  margin: 0;
  padding: 0;
}

#sub-topics li {
  display: block;
}

#subTopics a {
  text-align: left;
}

/*columns*/

#column1,
#column2,
#column3 {
  position: relative;
  float: left;
  left: 125px;
  margin: 0px 5px 0px 0px;
}

/*hover underline*/

#main-menu li:hover {
  text-decoration: underline;
}

/*slideshow*/

#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#slider {
  overflow-x: hidden;
}

#slide1 {
  background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
  background-position: left top;
}

#slide2 {
  background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
  background-position: left top;
}

#slide3 {
  background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
  background-position: left top;
}

.slide {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 800px 400px;
  width: 100%;
  height: 450px;
  overflow-x: hidden;
  position: relative;
}

.slide-contain {
  text-align: center;
  color: white;
  position: relative;
  height: 100%;
  width: 100%;
}

.slide-contain span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}