Question

这是我的代码：http://jsfiddle.net/vy6w2tun/1/

<html>
</html>

（1）文本位于页面的中心，这正是我想要的。

（2）但是，我希望图像居中（就是这样），但我不希望文本覆盖图像。我希望图像位于文本下方，以使图像的任何部分都不会被文本覆盖，反之亦然。

我该怎么做？

Answer 1

i从p {}中删除了position:absolute;和top left值和transform值。 İ在p {}中添加了margin:0 auto;（用于居中）和width:70%;。

<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }
        
        body {
            margin: 0;
            padding: 0
        }
        
        @font-face {
            font-family: HelveticaNeueLTCom-Th;
            src: url("HelveticaNeueLTCom-Th.ttf")
        }
        
        p {
            font-family: HelveticaNeueLTCom-Th;
            font-size: 19pt;
            letter-spacing: 1.2px;
            color: red;
            line-height: 1.5;
            text-align: justify;
            margin:0 auto;
            width:70%; /* it's up to you */
        }
        
        .fullscreen-bg {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100
        }
        
        .fullscreen-bg__video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }
        
        .img {
            display: grid;
            height: 100%
        }
        
        .center-fit {
            max-width: 100%;
            max-height: 90vh;
            margin: auto
        }
        
        @media (min-aspect-ratio: 16/9) {
            .fullscreen-bg__video {
                height: 300%;
                top: -100%
            }
        }
        
        @media (max-aspect-ratio: 16/9) {
            .fullscreen-bg__video {
                width: 300%;
                left: -100%
            }
        }
    </style>
</head>

<body>
    <div class="fullscreen-bg">
        <video loop autoplay muted src="video.mp4" type="video/mp4" class="fullscreen-bg__video"></video>
    </div>
    <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
    <div class="img"> <img class="center-fit" src='https://grcc.net/wp-content/uploads/2015/06/Dogs-for-Rob-1-e1434850228704-1024x695.jpg'></div>
    <div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
    <div class="img"> <img class="center-fit" src='https://picsum.photos/400/300'></div>
</body>

</html>

定位文字和图像？

1 个答案: