居中Div元素垂直

我正在研究一個非常基本的網站模板，在左上角有一個固定的標題，在左下角和右下角有一個固定的底線。居中Div元素垂直

中間的內容應該是居中，我不能完全弄清楚我做錯了什麼。

問題1）如果我刪除了height: 100% css屬性，爲什麼垂直居中不起作用？

問題2）當在html標籤上聲明height: 100%時，爲什麼網站大於100％並超出了瀏覽器窗口？

問題3）爲什麼bottom-left顯示正確，但不是bottom-right？

問題4）如果將with設置爲100％並且文本對齊到右側，那麼文本不會從右側瀏覽器框架開始並延伸到左側？爲什麼它擴展瀏覽器窗口？

非常感謝您的幫助。代碼如下

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

html { 
    height:100%; 
} 

body { 
    height: 100%; 
    margin-left: 20px;‚ 
} 

.title { 
    position: absolute; 
    top: 20px; 
    font-family: serif; 
    font-size: 20px; 
    text-align: left; 
} 

/* Center Text Section */ 

.area { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

.middlespace { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    display: table; 
} 

.middlespace p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.exhibitionindex { 
    text-align: center; 
    width: 500px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.bottom-left { 

    position: absolute; 
    bottom: 15px; 
    text-align: left; 
} 

.bottom-right { 
    position: absolute; 
    bottom: 15px; 
    text-align: right; 
} 

.exhibitiontitle { 
    color: #d4d4d4; 
    font-style: italic; 
    font-family: sans-serif; 
    font-size: 10px; 
    text-align: center; 
} 

.bold { 
    font-family: serif; 
} 


.about { 
    font-size: 11px; 
} 

.contact { 
    font-size: 11px; 
} 

.openinghours { 
    font-style: italic; 
    color: #8e8e8e; 
    font-size: 11px; 
} 

</style> 

<title>Website Title</title> 

</head> 
<body> 
    <div class="title">Logo/Title Text</div> 

    <div class="area"> 
     <div class="middlespace"> 
      <p>27. April 2012</p> 
     </div> 
    </div> 
    <div class="bottom-left"> 
     <span class="about"><span class="bold">XYZ</span> is a project by Person One, Person Two, Person Three&nbsp;&nbsp;&#124;&nbsp;</span> 
     <span class="contact">Website Information &mdash; <a href="mailto:[email protected]">[email protected]</a></span> 
    </div> 
    <div class="bottom-right"><span class="openinghours">Opening Hours Information</span></div> 
</body> 
</html>

來源

2012-05-15 Roland

首先，您已經有一些額外的大括號。在做其他事情之前，我會先清理它們。 –

謝謝傑夫！照顧那些。 – Roland

This：'營業時間Information/span'沒有正確關閉。 – Zuul

問題1）爲什麼如果我刪除了高度垂直居中不行可見：100％的CSS屬性？

默認情況下，html和body元素展開高度以適合其內容。因此，如果沒有設置高度，您的html只能包含內容爲樣式的高度。此外絕對定位的元素不會影響父母的大小。如果沒有將高度設置爲100％，area也不會是窗口的整個高度，因此您將垂直居中放置在頁面頂部的小條中。

問題2）當在html標籤上聲明身高：100％時，爲什麼站點大於100％並超出瀏覽器窗口？

這樣就不會超出頁面邊界。但是，如果您將邊距，邊框或類似屬性添加到100％的元素，則會將這些元素添加以及，使元素延伸到窗口的邊緣。

問題3）爲什麼左下方顯示正確，但不是右下方顯示？

你是絕對定位這些元素。 Div元素通常是父元素寬度的100％。但是，當你絕對放置它們時，它們的寬度會縮小以適應內容。在你的情況下，你正在嘗試在默認情況下左對齊的div。由於div只與文本一樣大，所以左右對齊和中心對齊看起來都一樣。因爲您已經絕對定位了div，只需使用絕對定位來對齊它們：

.bottom-left { 
    position: absolute; 
    bottom: 15px; 
    left: 15px; 
} 
.bottom-right { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
}

來源

2012-05-15 17:47:43

謝謝傑夫！關於問題1：我在html標記中放置了margin-top/bottom：zero，這使得站點不再超出瀏覽器窗口。我只定義了剩餘利潤率：15％之前，並想知道爲什麼這會增加徘徊底部或頂部？或者默認情況下，html總是有小的餘量？ – Roland

你的身體裏有'margin-left：20px;'。你可能不應該這樣做。相反，要麼進行填充，要麼將元素絕對定位在20像素以上。例如，在你的標題上做'left：20px'。 –

和@Roland，每個瀏覽器都有許多不同的默認CSS定義。通常情況下，主體默認具有填充，以及一些其他樣式，這些樣式因瀏覽器而異。用CSS重置樣式表「標準化」你的CSS通常是一個好主意。這裏有一個例子：http://meyerweb.com/eric/tools/css/reset/ –

居中Div元素垂直

回答

相關問題