对齐内容在页面中间

问题描述：

我这个网站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>[email protected]<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>

内容将在中心跨度实际一致，但页面的宽度是不正确的。页面宽度只能在屏幕的2/3左右。看看你的div是嵌套的，看看哪一个太小 – jonmrich

答

试试这个

div { 
 
    width: 300px; 
 
    height: 200px; 
 

 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 

 
    margin: auto; 
 
}

<section class="section-content section-intro" id="section-intro"> 
 
      <div class="row"> 
 
      <div class="span12 reservation"> 
 
       <h5>Reservation unter:</h5> 
 
       <p>[email protected]<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>

答

您可以使用CSS3 Flexbox的或引导网格中心的内容，为中心

<div align = "center">

答

这里有解决方案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; 
}

注意的是，如果容器有一个固定的高度此解决方案仅适用！

答

您可以将外部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/

对齐内容在页面中间

相关推荐