How do I center specific content?

Question

I've got a slideshow with 2 pictures and a text under it. I just want to center it in the middle of my header. For some reason I'm struggling.

The content which should get centered is in my body and in <div class="main">

I already tried to work with:

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

which solved my problem for the header but it doesn't do it for the rest.

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

margin: 0 auto is your friend! Have a look here: https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work — Timen, Aug 02 '18 at 07:41

score 0 · Answer 1 · answered Aug 02 '18 at 07:41

Is this what you're looking for? Sorry, it isn't too clear which part should be centered. Adding margin: 0 auto can be a useful way to centre content in certain conditions.

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

score 0 · Accepted Answer · edited Aug 02 '18 at 08:59

0

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

It's pretty much what u said and makes it columnar.

edited Aug 02 '18 at 08:59

answered Aug 02 '18 at 07:42

Sten Muchow

6,623
4
36
46

Thanks this did it for me! :) – loyd Aug 02 '18 at 07:45

How do I center specific content?

2 Answers2