The
tag on my
keeps going too far to the bottom

Question

The  tag on my <div> keeps going too far to the bottom when I add the 50% margin at the top of the "copyright" div, I am trying to get the &copyGamers Costa Rica - Noticias 2015 to the very middle of the "copyright" div (at the bottom ), and it will add a big piece of space when I add the margin-top: 50%, instead of sending the &copyGamers Costa Rica - Noticias 2015 to the very center of its parent div.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <title> Adrian Velez - Portfolio</title>
    </head>
    <body>
        <div id="maincontainer">
            <!-- LEFT MENU START -->
            <div id="menu">
                <div class="navbar">
                    <ul>
                        <li>Reviews</li>
                        <li>Galeria</li>
                        <li>Contacto</li>
                    </ul>
                </div>
            </div>
            <!-- WRAPPER START -->
            <div id="wrapper">
                <!-- LEFT MENU START -->
                <div id="wrapperleftmenu">
                    <div id="reviewpreview">
                        <div id="rpcontainer">
                            <div id="wlmtext">
                                <h3>Rust Review</h3>
                                <br>
                                <p>En rust, lo principal sera sobrevivir...</p>
                            </div>
                            <div id="wlmimage">
                                <a href="a">_</a>
                            </div>
                        </div>
                    </div>
                    <div id="news">
                        <h3>PES 2016 now available</h3>
                        <p>The new soccer sim is out and we got it!</p>
                        <img src="https://steamcdn-a.akamaihd.net/steam/apps/252490/header.jpg">
                    </div>
                    <div id="screenshot">
                        <h3>The screenshot of the week!</h3>
                        <p>Pertains to Rust Gameplay and its awesome!</p>
                        <img src="https://steamcdn-a.akamaihd.net/steam/apps/252490/header.jpg">
                    </div>
                </div>
                <!-- RIGHT  MENU START -->
                <div id="wrapperrightmenu">
                    <div id="contact">
                        <h2>We are easy to reach!</h2>
                        <p>Just send us an email or reach us at social media for anything you need or want!</p>
                    </div>
                    <div id="socialmedia">
                        <i class="fa fa-facebook-official"></i>
                        <i class="fa fa-facebook-official"></i>
                    </div>
                    <div id="youtube">
                        <h2>Watch s playing BF3!</h2>
                        <p>Want to see a pro at BF3? admin Vichi is not one :c</p>
                    </div>
                </div>
            </div>
            <div id="copyright">
                <p>&copyGamers Costa Rica - Noticias 2015</p>
            </div>
        </div>
    </body>
</html>

Here is the CSS:

* {
     max-width: 100%;
     color: white;
     margin: auto;
 }
 html,
 body {
     width: 100%;
     margin: 0 auto;
     height: 100%;
 }
 /*  MAIN STYLE FOR EACH CONTAINER */

 #maincontainer {
     width: 100%;
     height: 100%;
     background-image: url(images/main.jpg);
     background-repeat: no-repeat;
     background-position: top;
 }
 #menu {
     width: 19.8%;
     height: 100%;
     background-image: url(images/bd.png);
     float: left;
     opacity: 0.9;
 }
 #wrapper {
     width: 80%;
     height: 90%;
     background-image: url(images/bd.png);
     opacity: 0.9;
     float: left;
     border-left: white solid 1px;
 }
 #copyright {
     width: 80.2%;
     height: 10%;
     background-image: url(images/gray.png);
     float: left;
     opacity: 0.7;
     text-align: center;
 }
 #copyright p {
     color: black;
     margin-top: 50%
 }
 /*  NAVBAR LEFT SIDE STYLE */

 .navbar {
     margin: 50% auto;
     width: 50%;
     height: 50%;
 }
 .navbar ul {
     width: 50%;
     height: 50%;
     margin: 50% auto;
 }
 .navbar ul li {
     width: 50%;
     list-style-type: none;
     color: white;
     display: inline-block;
     margin-top: 15px;
 }
 /*  WRAPPER's LEFT SIDE STYLE */
 /*  THE REVIEWS SHIT */

 #wrapperleftmenu {
     float: left;
     width: 60%;
     height: 100%;
     margin: 2% auto;
     border-right: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  THE REVIEWS SHIT  */

 #reviewpreview {
     width: 60%;
     height: 33%;
     margin: 2% auto;
     border: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  THE REVIEWS PICTURE  */

 #rpcontainer {
     width: 95%;
     height: 90%;
     margin: 2% auto;
     border: white solid 1px;
 }
 /*  REVIEW STYLE */
 /*  WRAPPER LEFT MENU TEXT - TEXT FOR REVIEW  */

 #wlmtext {
     width: 23%;
     height: 60%;
     margin: 10% 3%;
     border: white solid 1px;
     float: left;
     display: inherit;
 }
 #wlmimage {
     width: 65%;
     height: 60%;
     margin: 10% auto;
     border: white solid 1px;
     float: left;
     background-image: url(http://cdn.akamai.steamstatic.com/steam/apps/252490/header.jpg?t=1437745418);
     background-size: cover;
 }
 #news {
     width: 60%;
     height: 15%;
     margin: 2% auto;
     border: white solid 1px;
 }
 #screenshot {
     width: 60%;
     height: 39%;
     margin: 2% auto;
     border: white solid 1px;
 }
 /*  WRAPPER's RIGHT SIDE STYLE */
 /*  THE SOCIAL MEDIA STUFF */

 #wrapperrightmenu {
     width: 60%;
     height: 100%;
     margin: 2% auto;
 }

What are you expecting `margin-top:50%` to do?...it doesn't center vertically you know. — Paulie_D, Aug 21 '15 at 20:27
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ might be interesting here... — Dominik Schreiber, Aug 21 '15 at 20:28
Duplicate of http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css?rq=1 — Paulie_D, Aug 21 '15 at 20:29

score 0 · Answer 1 · answered Aug 21 '15 at 21:55

There are a lot of ways of vertically aligning elements within a parent. Here's one way, using display: table and display: table-cell:

First set your container #copyright to display as if it was a table:

#copyright {
    width: 80.2%;
    height: 10%;
    background-image: url(images/gray.png);
    float: left;
    opacity: 0.7;
    text-align: center;
    display: table;
}

Then set your inner paragraph to have 100% height (of the parent #copyright) and to display as a table-cell. You can then use vertical-align: middle to align your content:

#copyright p {
    color: black;
    display: table-cell;
    vertical-align: middle;
}

JS Fiddle here: http://jsfiddle.net/joqpbmf1/

The tag on my keeps going too far to the bottom

1 Answers1

The
tag on my
keeps going too far to the bottom