Question

当我在“版权”div的顶部添加50％的保证金时，<p>上的<div>标记一直走得太远，我试图获得{{1}到“版权”div的中间位置（在底部），当我添加margin-top时它将添加一大块空间：50％，而不是将<p>&copyGamers Costa Rica - Noticias 2015</p>发送到其父div的中心。

<p>&copyGamers Costa Rica - Noticias 2015</p>

这是CSS：

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

Answer 1

有很多方法可以在父级中垂直对齐元素。这是一种方式，使用display: table和display: table-cell：

首先将容器#copyright设置为显示为好像是表：

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

然后将内部段落设置为100％高度（父级#copyright）并显示为表格单元格。然后，您可以使用vertical-align: middle来对齐您的内容：

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

JS小提琴：http://jsfiddle.net/joqpbmf1/

我的</p> <div>上的<p>标签一直走得太远了

1 个答案: