垂直居中兩個浮動元素彼此

我認識到垂直居中是一個話題，經常出現在這裏和其他網站，但我仍然是新的HTML，即使在閱讀了這個話題後，我仍然感到困惑。垂直居中兩個浮動元素彼此

我試過爲一個包含h1標題和導航鏈接的導航欄的網站製作一個簡單的標題元素。下面是HTML：

<!doctype html> 
<html> 
<head> 
    <title>Sample website</title> 
    <link href="css/homepage.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 

    <header> 
    <h1>Website Title Here</h1> 
    <ul> 
    | <li><a href="#">Home</a></li> | 
     <li><a href="./about/index.html">About me</a></li> | 
     <li><a href="./contact/index.html">Contact me</a></li> | 
     <li><a href="http://throughbenslens.co.uk/blog">My blog</a></li> | 
     <li><a href="./portfolio/index.html">My portfolio</a></li> | 
    </ul> 
    </header> 

    <hr class="hrstyle" style="clear:both;"/> 

</body> 
</html>

和相應的CSS：

header{ 
    max-width: 1000px; 
    margin:auto; 
} 

h1{ 
    font-family: Helvetica; 
    float: left; 
    padding:0; 
} 

ul{ 
    display: inline-block; 
    float: right; 
    padding:0; 
} 

li { 
    font-family: Helvetica; 
    font-variant: small-caps; 
    list-style-type: none; 
    display: inline; 
} 

.hrstyle{ 
    max-width:1000px; 
}

我試圖讓H1標題和導航列表行中心對齊彼此垂直。目前，它看起來像這樣...

element aligment

隨着出現在頭頂部的導航元素。

我讀過很多東西，但我很猶豫，只是盲目地從互聯網上覆制代碼而未完全理解它。

來源

2013-08-22 BML91

你應該張貼的jsfiddle用代碼，使人們可以看到，只需點擊一下一個活生生的例子！我已經開始爲你做好了。 http://jsfiddle.net/AnPkT/ – Zhanger

道歉，我從未在今天之前遇到過jsfiddle，整潔的小工具！謝謝。 – BML91

作爲一個側面說明：始終在開始時使用CSS Reset來覆蓋瀏覽器的默認樣式表。許多類似的問題是由瀏覽器的默認樣式造成的。（請看[Eric Meyer的CSS重置]（http://meyerweb.com/eric/tools/css/reset））。 –

嘗試line-height。在你的CSS

ul { 
    ... 
    line-height: 40px; 
}

添加到您的ul融合到你的願望的數量。

這裏有一個關於不同垂直居中技術的教程。我會繼續加入這個。但它可能會說明元素如何對不同造型作出反應。

Codpen example on padding and line-height

來源

2013-08-22 22:13:21 kunalbhat

Codepen鏈接在這裏：http://cdpn.io/jwruv – kunalbhat

雖然這種方式的工作方式 - 即我可以將ul元素向下移動 - 這有點混亂。它並不完全集中它，它只是猜測工作 - 是否沒有一種方法可以將元素完美地集中在一起？ – BML91

添加了我正在爲您構建的一些示例的鏈接。 – kunalbhat

爲了您的UL補充一點：

ul{ 
    ... 
    position:absolute; 
    top:25px; 
    right:0px; 
}

位置絕對可以讓你控制從側面的元素的位置。因此，從頂部推動它一定量，從右側推動0。這將產生你所描述的。

這裏是小提琴： http://jsfiddle.net/AnPkT/2/

來源

2013-08-23 00:21:28

垂直居中兩個浮動元素彼此

回答

相關問題