Question

嗨我基本上有这个文本块，它位于显示确认的Div内。我希望它位于图像顶部的页面中间，而不是位于底部。我怎么能这样做？

这是我的代码，我希望进程位于图像顶部的页面中间

<DOCTYPE! html>
<html>
<head>
    <meta charset="uft-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"">
    <meta name= "viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="style/styles.css" type="text/css" rel="stylesheet">


</head>
<body>

        <h2 id="siteTitle">Westend</h2>
        <nav>
            <ul class="main_menu">
                <li><a href="index.php">Home</a></li>
                <li><a href="booking.php" >Booking</a></li>
            </ul>
        </nav>

<div><img src="images/curtains.jpg" id="open"/> 
<div id="process">
</br>Hi <?php echo "'".$_SESSION['name']."'"; ?></br>
Your tickets have been booked for <?php echo "'".$_SESSION['production']."'";?>  
</br>Playing on <?php echo "'".$_SESSION['date']."'";?> at <?php echo "'".$_SESSION['time']."'";?> </br>
You are in <?php echo $_POST["zone"];?> in row <?php echo $_POST["row"];?></br>
The total cost is £<?php echo $_POST["quotation"];?></br>
Confirmation of your booking has been sent to: <?php echo "'".$_SESSION['email']."'"; ?></br>
</br>
Enjoy the show!
</br>
</div>




    <footer id="pageBottom">

        <p>&copy Westend 2015</p>
    </footer>




</body>
</html>

这是我的CSS

#process {
    text-align: center;
    font-family: San-Serif;
    font-size: 20px;
    text-shadow: 1px 1px 0 #1a1a1a;
    background-color: #802000;
    width: 450px;
    height: 270px;
    margin-top: 25px;
    margin-bottom: 10px;
    margin-left: 750px;
    border: 1px solid white;
    padding-bottom:2px;
    box-shadow: 3px 4px 5px grey;
    clear: inherit;
}

Answer 1

您可以按如下方式使用绝对位置：

#process {
position: absolute;
top: calc(50% - 135px);
left: calc(50% - 225px); 
text-align: center;
font-family: San-Serif;
font-size: 20px;
text-shadow: 1px 1px 0 #1a1a1a;
background-color: #802000;
width: 450px;
height: 270px;
border: 1px solid white;
padding-bottom:2px;
box-shadow: 3px 4px 5px grey;
clear: inherit;
}

这里是codepen，希望这有帮助

Answer 2

我认为这不是解决问题的正确方法。

您可以考虑使用background-size：contains添加 .process 背景图片。

然后将元素.process与位置绝对值中心化：

.process{
    background-image: url("../images/curtains.jpg");
    background-size: contain;
    background-position: center;
    position: absolute;
    width: 450px;
    height: 270px;
    top: 50%;
    left: 50%;
    margin-left: -225px;
    margin-top: -135px;
}

Answer 3

您可以使用不同的方法来实现。实现所需行为的一种方法是将div定位放在页面的正常流量之外，将其位置设置为绝对值。这样，您还需要设置正确的定位属性（顶部，左侧）以使页面中的元素居中：

#process {
    position: absolute;
    width: 450px;
    height: 270px;
    top: 50%; /* distance from top border */
    left: 50%; /* distance from left border */
    margin-left: -225px; /* half the width */
    margin-top: -135px;  /* half the height */
}

如何让这个元素清除图像，使其位于背景顶部的页面中间位置

3 个答案: