css - Jumbotron中心文本垂直和水平 - Thinbug

Jumbotron中心文本垂直和水平

时间：2014-08-19 10:52:52

标签： css html5

有jumbotron中心文本水平和垂直的问题.. 我怎么做到这一点？我尝试过纵向对齐ang文本对齐但是仍然没有工作..帮助请。

HTML CODE HERE

<html>
    <head></head>
        <body>
            <section class="jumbotron-section-1">
                <div class="jumbotron no-margin jumbotron-section-1-bg">
                    <div class="container-fluid introduction">
                        <h1 class="name">Full Name</h1>
                        <p>Some text here..</p>
                        <a href="#" class="visible-xs btn call-me">Some text here..</a>
                    </div>      
                </div> 
            </section>
        </body
</html>

CSS CODE HERE

<style>
    .jumbotron-section-1 {
    padding-top: 70px !important;
    }
        .jumbotron-section-1-bg {
        background: url('../img/banner-img/bg10.jpg') no-repeat center center; 
        height: 768px;
        background-size:100% 100%;
        background-attachment: ;
        }
        .introduction {
        text-align: center;
        vertical-align: middle;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        .name {
        font-family: "custom-headerfont",sans-serif;
        }
        .introduction p {
        font-weight: bold;
        }
</style>

2 个答案:

答案 0 :(得分：1)

这就是我所做的，它的工作

.jumbotron-section-1 {
    padding-top: 70px !important;
}
.jumbotron-section-1-bg {
    background: url('../img/banner-img/bg10.jpg') no-repeat center center; 
    height: 768px;
    background-size:100% 100%;
    background-attachment: ;
}
.introduction {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.name {
    font-family: "custom-headerfont",sans-serif;
}
.introduction p {
    font-weight: bold;
}

答案 1 :(得分：0)

<style>
        .jumbotron-section-1 {
        }
        .jumbotron-section-1-bg {
            background: url('../img/banner-img/bg10.jpg') no-repeat center center;
            width: 100%;
            height: 100%;
        }
        .introduction {
            width:300px;
            height:100px;
            position:absolute;
            left:50%;
            top:50%;
            margin:-100px 0 0 -150px;
            text-align: center;
        }
        .name {
            font-family:"custom-headerfont", sans-serif;
        }
        .introduction p {
            font-weight: bold;
        }
    </style>