Question

我试图在所有屏幕尺寸上垂直垂直标识，标题和按钮，我该如何做到这一点？这是我最近一直在做的事情。我还为此添加了Bootstrap。谢谢！

＆＃13;

body {
    vertical-align: middle;
}

.fillWidth{ 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
}

.logo {
    text-align: center;
}

img {
    padding-top: 7em;
    position: static;
    max-width: 100%;
    position: relative;
}

.logo p {
    color: white;
    font-family: Verdanda, Arial, sans-serif;
    font-size: 4em;
}

.btn-lg {
    border-radius: 0;
    border: solid 1px #42C1C6;
    min-width: 300px;
    height: 50px;
    margin-bottom: 40px;
    background-color:  #42C1C6;
    color: white;
    text-align: center;
    font-size: 1.3em;
    display: inline-block;
}

.fadeIn {
    -webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 15s; /* Firefox < 16 */
    -ms-animation: fadein 15s; /* Internet Explorer */
    -o-animation: fadein 15s; /* Opera < 12.1 */
    animation: fadein 15s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
}

    
.btn-info {
    background-color: #42C1C6;
    border-color: none;
    }

.btn-info:hover {
    background-color: #1B5DAB;
    border-color: none;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="main.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="homepage-hero-module">
            <video autoplay class="fillWidth">
                <source src="links/vidmp4.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                <source src="links/webvid.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
            </video>
        <div class="poster hidden">
                    
        </div>
        <div class="audio">
            <audio autoplay>
                <source src="links/ODESZA%20-%20My%20Friends%20Never%20Die.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </div>
        </div>
        <div class="logo fadein">
            <img class=".img-responsive" src="links/TOUCH2%20LOGO-Final-01.png">
            <p>Coming Soon</p>
        </div>
        <div class="contact fadeIn" style="text-align: center;">
            <a href="mailto:hello@touchsquaredmarketing.com subject=Touch Squared Marketing"><button type="button" class="btn btn-info btn-lg">Contact Us</button></button></a>
            </a>
        </div>
    </body>
</html>

＆＃13;

对齐我的着陆页元素 - 响应

0 个答案: