Question

我正在尝试做一个视差网站，我试图让我的内容垂直和水平居中，但保持对齐。

参见jsFiddle：http://jsfiddle.net/B3nxK/37/

HTML：

    <div class="container box">    
        <div class="anchor" id="fit"></div>
        <div class="section fit red">
            <div class="t">
                <div class="tc">
                     <h1>Fit</h1>
                    <p>width and height</p>
                </div>
            </div>
        </div>
        <div class="section fit green">
            <div class="t">
                <div class="tc">
                     <h1>Fit</h1>
                    <p>width and height</p>
                </div>
            </div>
        </div>
    </div>


Thanks in advance.


EDIT
--

请参阅下面的代码以获取引导程序。中心列包含主要信息。每个＆＃34;部分＆＃34;假设单独居中于整页。它被假设为一个视差滚动网站，背景不会因每个部分而改变，而是滚动时对象会出现并消失。

HTML：

            <div class="row vertical-align">

                <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 left-col">
                </div>

                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 content">
                    <div id="menu" style="background-color:red">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="columnone" style="background-color:green">
                                <p class="categories">STARTERS</p>

                                <p class="names">BARRAMUNDI</p>
                                <p class="description">Atus alitatur magnatquos aut estiisc idebit, od quis volorporem. Se cus repelliquae mo consed mod ut adicabo ribusciam ipsumquas</p>
                                <p class="cost">-45</p>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="columntwo" style="background-color:blue">
                                <p class="categories">MAINS</p>

                                <p class="names">BARRAMUNDI</p>
                                <p class="description">Atus alitatur magnatquos aut estiisc idebit, od quis volorporem. Se cus repelliquae mo consed mod ut adicabo ribusciam ipsumquas</p>
                        <p class="cost">-45</p>
                    </div>    
                </div>
            </div>
</div>

        <div id="about" style="background-color:yellow">
            <p class="about_header">OUR RESTAURANT</p>
            <p class="about_info">Uptatio. Ulparumet fugitatibus, occusda cum fuga. Et esed quam ipid ut eum si am re desedis. Ommolum faciet imporep erepudae vel in el mil iliquo blautatur, aut officipis ium venis dolupta que possimo esti ut vellaut et restis adit latem sam, odit perum landit doles aute sanis estempos eos et que omni tetus ea peditatur.</p>
        </div>

        <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 right-col">     
        </div>

    </div>

CSS：

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body{
    background: url(../assets/background.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    background-size: cover;
}

.row{
    margin-right:0;
    margin-left:0;
}

Answer 1

这是一种方式......

您可以将内容从“部分”移动到新的“子部分”，然后将“section”宽度设为80％并将红色/绿色/蓝色/等添加到子部分（以重新添加背景颜色）。

Answer 2

添加一个额外的div：

<div class="tc">
   <div id="xyz">
     <h1>Fit</h1>
     <p>width and height</p>
   </div>
</div>

和CSS：

#xyz {
  display: inline-block;
  text-align: left;
}

<强> FIDDLE

视差站点的垂直和水平居中

2 个答案: