Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mark Libario
Mark Libario
9,003 Points

How can I keep my blockquote in the middle of the page even after resizing the browser?

I tried putting a block quote in the middle of my page, which I successfully accomplished. But I tried different things to make it vertically aligned forever even when resizing the browser but to no avail. I tried changing the margin top and bottom, padding, height, tried doing some position relative/absolute but it just keeps staying at the bottom of the page near the footer when I resize the page.

Maybe im doing wrong combination? anyone can help me out with this?

<!Doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>TITLE | Mark and Donzie</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Lobster|Oxygen" rel="stylesheet">
    <link rel="stylesheet" href="css/main1.css">
  </head>

  <body>
    <div id="wrapper">
      <div id="heading">      
        <h1>The German Labrottie</h1>
        <h2>Maui</h2>
      </div>

      <div id="main-nav">
        <nav>
          <ul>
            <li><a href="index.html" class="selected">Home</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="about.html">About Me</a></li>


          </ul>
        </nav>

      </div>

      <div class="page">

         <p> Maui the German Labrottie </p>

         </div>

          <blockquote>
            <h4>"A dog is the only thing on earth that loves you more than he loves himself."</h4>

          </blockquote>





      <div id="main-footer">
        <footer>
          <a href ="http://www.instagram.com/maui_theglabrottie"><img src="img/instagram.png" class="insta-icon"></a>
          <p>&copy; Mark Libario 2017.</p>

        </footer>


      </div>



  </div>
  </body>
 </html>
Mark Libario
Mark Libario
9,003 Points 
html {
   height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;

}



#wrapper {
  min-height: 100%;
  position: relative;
}


/***********HEADING ************/

#heading {
  border: 10px double #000;
  margin:10px auto 0px auto;
  padding: 0px 10px;
  text-align:center;

}

h1 {
  color: #001;
  font-family: 'Lobster', cursive;
  letter-spacing: 0.25em;  
}

h2 {
  color: rgb(93,93,93);
  margin:  0px auto 5px auto;
  font-size: 14px;

}

div.page {
  font-family: 'Lobster', cursive;
  position: relative;
  text-align: center;
  font-size: 30px;
  margin: 250px;
   max-width: 100%;
  max-height: 100%;

}

blockquote {
  display:block;
  background: #fff;
  margin:-250px auto;
  font-family: 'Oxygen', sans-serif;
  text-align: center;
}

blockquote h4:before { 
    content: open-quote;
    font-weight: bold;
    font-size:50px;
    color:#889c0b;
} 
blockquote h4:after { 
    content: close-quote;
    font-weight: bold;
    font-size:50px;
    color:#889c0b;
}

/* ==========================
    Main Navigation 
==========================*/

#main-nav {

  margin: 5px auto;
  text-align: center;
  font-family: 'Oxygen', cursive;
  font-weight: 800;
}

nav a, nav:visited {
  text-decoration: none;
  color: #000;
  margin: 10px auto;
  font-weight: 800px;
  padding: 10px;

}

nav a.selected, nav a:hover{
  font-size: 20px;
  color: red;
  letter-spacing: 0.25em;
}




ul li {
  list-style: none; 
  display: inline;
  margin: 0px 20px 0px 20px;
}


/***** FOOTER *****/

footer {
  text-align:center;
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 40px;


}

.insta-icon {
  height: 20px;
  width: 20px;
}

/* =============================
PAGE: ABOUT
==============================*/

#heading-two {
  margin: 0px auto;
  border: 10px double #000;
  padding: 0px 10px;
  text-align:center;

}

.profile-photo {
  display:block;
  margin: 50px auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

h3 {
  margin:  0px 10px;
  text-align: center;
}

.aboutme {
  font-family: 'Oxygen', sans-serif;
  margin: 10px 20px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 25px;
  text-align: center;
  padding: 15px;
}

3 Answers

Elizabeth Martinsen
Elizabeth Martinsen
8,393 Points

Hello Mark! One thing I notice is that your <blockquote> is not contained in the .page <div> (at least not in the snippet you posted). Any styles you apply to that <div> to control the <blockquote> won't affect it. That could be part of the problem.

Vertically centering things is difficult for everybody. Have you considered using flexbox to accomplish this? There are a couple ways you could use it. Keep in mind both of these methods would require the blockquote to be inside of the .page <div> or another container.

  1. You could set the parent container's display to "flex" and set the alignment of the flex items to "center." However, this would center everything in the container, which you may not want.

  2. Alternatively, you could set the parent div to display: flex and then self-align the blockquote.

/* Align the item to the center using the parent div as a flex item */

.page {
  display: flex;
  align-items: center;
}

/* Or self-align the item as long as it's a direct child of the parent div */

.page {
  display: flex;
}

.page blockquote {
  align-self: center;
}

Then in your HTML set it up like this:

 <div class="page">

    <p> Maui the German Labrottie </p>

    <blockquote>
      <h4>"A dog is the only thing on earth that loves you more than he loves himself."</h4>
    </blockquote>

</div>
Mark Libario
Mark Libario
9,003 Points

Ok thank you ill try this! On a full page browser i have it in the middle, its just really when i resize it to "mobile" its not in the middle anymore.. its not the same technique as the tutorial css with nick, max-width with the photos in the gallery and using float.

How do i post my snippet properky like the people here. I tried putting ''' before and after and still doesnt work lol.

Elizabeth Martinsen
Elizabeth Martinsen
8,393 Points
Elizabeth Martinsen
Elizabeth Martinsen
8,393 Points

No problem! Flexbox is perfect form mobile/responsive design, in fact, that's what it was made for! There is a really great course on Flexbox by Guil in the CSS section here on Treehouse if you're interested. Here's the link

Also, it looks like you're using the apostrophe key (the same key as the double quotes) when doing your markdown, if you're doing it like you typed above. What you actually want to use is the backtick (` vs. '), which is the same key as ~ (I think it's the same on PC and Mac, I'm on a mac). Hope that helps!

Mark Libario
Mark Libario
9,003 Points
Mark Libario
Mark Libario
9,003 Points

Thank you! Ill check it out. There are still alot of properties i need to know so every advice helps! Just following everything that is being done on videos wont help me learn quick so i try to do it but with my own tweaks, hence getting roadblocks and asking for help :)