Question

我已访问此网站http://n-restaurant.nowcommu.myhostpoint.ch/reservation.html

如何将内容完美地放在中间？我的意思是：

<section class="section-content section-intro" id="section-intro">
           <div class="row">
             <div class="span12 reservation">
                 <h5>Reservation unter:</h5>
                 <p>reservation@restaurant-nigrum.com<br>Tel.: +49 7221 / 3979006</p>
                <!-- <p>Restaurant Nigrum<br>Baldreitstrasse 1<br>76530 Baden Baden<br>Tel.: +49 7221 / 3979006<br>Fax: +49 7221 / 3979007</p>-->
                 <h5>Öffnungszeiten:</h5>
                 <p>Dienstag bis Samstag 18:00 - 24:00<br>Sonntag Montag Ruhetag</p>

            </div>
        </div>
</section>

Answer 1

试试这个

＆＃13;

div {
    width: 300px;
    height: 200px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

＆＃13;

<section class="section-content section-intro" id="section-intro">
           <div class="row">
             <div class="span12 reservation">
                 <h5>Reservation unter:</h5>
                 <p>reservation@restaurant-nigrum.com<br>Tel.: +49 7221 / 3979006</p>
                <!-- <p>Restaurant Nigrum<br>Baldreitstrasse 1<br>76530 Baden Baden<br>Tel.: +49 7221 / 3979006<br>Fax: +49 7221 / 3979007</p>-->
                 <h5>Öffnungszeiten:</h5>
                 <p>Dienstag bis Samstag 18:00 - 24:00<br>Sonntag Montag Ruhetag</p>

            </div>
        </div>
</section>

＆＃13;

Answer 2

您可以使用css3 flexbox或bootstrap网格将内容置于中心

<div align = "center">

Answer 3

以下是居中div的解决方案 StackOverflow Answer

这是我首选的解决方案。

HTML：

<div class="container"><div class="container__inner"></div></div>

CSS：

.container{
  position:relative;
}
.container__inner{
  width: 250px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

请注意，此解决方案仅在容器具有固定高度时才有效！

Answer 4

您可以将外部div显示设置为表格;和内部div作为表格单元格：

#div1{ 
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    position:fixed;
    width:595px;
    height:842px;
    background-color:green;
    display:table; 
}
#div2{
    display:table-cell;
    vertical-align: middle;
    margin:auto; 
    background-color:red;
    position:relative;
}
#div3{
    text-align:center; 
    background-color:blue; 
    width:50%; 
    margin:auto
}

小提琴在这里：

https://jsfiddle.net/GlynneT/06uzt7xx/3/

对齐页面中间的内容

4 个答案: