如何在图像中心定位文本？

时间：2018-05-08 03:15:10

标签： javascript jquery html css

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

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>

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

2 个答案:

答案 0 :(得分：2)

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

现在您的标题将位于中心

快乐编码 

.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>

答案 1 :(得分：1)

您的文字已经在背景图片上。您只需添加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%);
}
相关问题
最新问题