如何集中特定内容？

时间：2018-08-02 07:33:15

标签： html css center

我有一张幻灯片，上面有2张图片和下面的文字。我只想将其居中放在标题的中间。由于某种原因，我在挣扎。

应该居中的内容在我的身体和<div class="main">

中

我已经尝试使用：

display: flex;    
align-items: center;    
justify-content: center;

这解决了我的标头问题，但其余部分则不解决。

@font-face {
  font-family: raw;
  src: url('Roboto-Thin.ttf') format('truetype');
}

img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  width: 70%;
}

.slogan {
  background-color: #333;
  font-family: "raw";
  font-size: 18px;
  margin-top: 2px;
  /*padding und borders*/
  width: 70%;
  text-align: center;
  color: #f2f2f2;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.slogan a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 70px;
  text-decoration: none;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  /* ...and now override with proper CSS property */
  transition: color 0.4s ease-out, background 0.4s ease-in;
}

.slogan a:hover {
  background: #ddd;
  color: black;
  height: auto;
}


/* The navigation bar */

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 80%;
  /* Full width */
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  font-family: "raw";
  font-size: 12px;
  margin-bottom: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Change background on mouse-over */

.navbar a:hover {
  background: #ddd;
  color: black;
}


/* Links inside the navbar */

.c a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 60px;
  text-decoration: none;
  margin-right: 0px;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  transition: color 0.4s ease-out, background 0.4s ease-in;
}

.d a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 0px;
  background: #333;
  -o-transition: color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition: color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition: color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition: color 0.4s ease-out, background 0.4s;
  ease-in;
  transition: color 0.4s ease-out, background 0.4s ease-in;
}


/* Main content */

.main {
  margin-top: 60px;
  /* Add a top margin to avoid content overlay */
}
<div class="navbar">
  <div class="c">
    <a href="#home">TEST</a>
  </div>
  <div class="d">
    <a href="#shop">Shop</a>
    <a href="#philosophy">Philosophy</a>
  </div>
</div>

<div class="main">
  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_1.jpg">
  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_2.jpg">
  <div class="slogan">
    <a href="#wallpaper">TESTTEST.</a>
  </div>

  <script>
    var myIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      myIndex++;
      if (myIndex > x.length) {
        myIndex = 1
      }
      x[myIndex - 1].style.display = "block";
      setTimeout(carousel, 6000);
    }
  </script>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

2 个答案:

答案 0 :(得分：0)

这是您要找的吗？抱歉，不清楚哪个部分应该居中。添加margin: 0 auto是在某些情况下将内容居中的有用方法。

@font-face { font-family: raw; src: url('Roboto-Thin.ttf')  format('truetype'); }

img {
  border-top-right-radius:20px;
  border-top-left-radius:20px;
  width: 70%;
}

.slogan {
  background-color: #333;
  font-family: "raw";
  font-size: 18px;
/*padding und borders*/
  width: 70%;
  text-align: center;
  color: #f2f2f2;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:20px;
  margin: 2px auto;
}

.slogan a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 70px;
  text-decoration: none;

  background: #333;
  -o-transition:color 0.4s ease-out, background 0.4s ease-in;
  -ms-transition:color 0.4s ease-out, background 0.4s ease-in;
  -moz-transition:color 0.4s ease-out, background 0.4s ease-in;
  -webkit-transition:color 0.4s ease-out, background 0.4s; ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.4s ease-out, background 0.4s ease-in;

}

.slogan a:hover {
    background: #ddd;
    color: black;
    height: auto;
}

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 80%; /* Full width */
    border-bottom-right-radius:20px;
    border-bottom-left-radius:20px;
    font-family: "raw";
    font-size: 12px;
    margin-bottom: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Change background on mouse-over */
.navbar a:hover {
    background: #ddd;
    color: black;
}

/* Links inside the navbar */
.c a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 60px;
    text-decoration: none;
    margin-right: 0px;

    background: #333;
    -o-transition:color 0.4s ease-out, background 0.4s ease-in;
    -ms-transition:color 0.4s ease-out, background 0.4s ease-in;
    -moz-transition:color 0.4s ease-out, background 0.4s ease-in;
    -webkit-transition:color 0.4s ease-out, background 0.4s; ease-in;

    transition:color 0.4s ease-out, background 0.4s ease-in;

}

.d a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin-left: 0px;

    background: #333;
    -o-transition:color 0.4s ease-out, background 0.4s ease-in;
    -ms-transition:color 0.4s ease-out, background 0.4s ease-in;
    -moz-transition:color 0.4s ease-out, background 0.4s ease-in;
    -webkit-transition:color 0.4s ease-out, background 0.4s; ease-in;

    transition:color 0.4s ease-out, background 0.4s ease-in;

}

/* Main content */
.main {
    margin-top: 60px; /* Add a top margin to avoid content overlay */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="C:\Users\XXX\Documents\HTML\Test\home.css">
</head>


<body>

<div class="navbar">

  <div class="c">
      <a href="#home">TEST</a>
  </div>

  <div class="d">
    <a href="#shop">Shop</a>
    <a href="#philosophy">Philosophy</a>
  </div>

</div>

<div class="main">

  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_1.jpg">
  <img class="mySlides" src="C:\Users\XXX\Documents\HTML\Test\img\home_2.jpg">

  <div class="slogan">
  <a href="#wallpaper">TESTTEST.</a>
</div>

  <script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 6000);
    }
</script>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>

</div>


</body>
</html>

答案 1 :(得分：0)

 .main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 60px;
   /* Add a top margin to avoid content overlay */
 }

这与您所说的差不多，并且使其具有圆柱感。

相关问题
最新问题