對齊內容在頁面中間

我這個網站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>

來源

2016-03-02 J.Jow

內容將在中心跨度實際一致，但頁面的寬度是不正確的。頁面寬度只能在屏幕的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>

來源

2016-03-02 13:06:28

您可以使用CSS3 Flexbox的或引導網格中心的內容，爲中心

<div align = "center">

來源

2016-03-02 13:07:43 Sykox

這裏有解決方案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; 
}

注意的是，如果容器有一個固定的高度此解決方案僅適用！

來源

2016-03-02 13:10:56 FrontDev

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

來源

2016-03-02 13:12:55

對齊內容在頁面中間

回答

相關問題