在導航中對齊文本（水平和垂直）

我對HTML/CSS非常陌生，所以這可能是一個愚蠢的問題，但我很難將我的文本置於導航欄中。我不知道如何正確居中水平或垂直居中，因此爲了使其水平放置，我只在導航中最左側的元素上放置了25％的左邊距。我認爲這不是正確的做事方式。至於如何垂直居中文本，我絕對不知道如何去做。在導航中對齊文本（水平和垂直）

作爲一個附加的問題，有人可以告訴我如何在調整瀏覽器窗口大小時進行文本縮放嗎？當我縮小窗口的寬度時，我的所有文字都會在屏幕上縮小。

P.S.我正在做這個作爲一個班級的任務，但我的教練並沒有真正的幫助。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Mini Vocaloid Wiki</title> 
    <meta charset="utf-8" /> 
    <link href="styles.css" rel="stylesheet" /> 
</head> 
<body> 

    <div id="page"> 

     <nav id="topNav"> 
      <a id="left" href="vocaloids.html">Vocaloids</a> 
      <a href="about.html">About</a> 
      <a href="contact.html">Contact</a> 
     </nav> 

    </div> 

</body> 
</html>

CSS：

body, html { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

#page { 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    padding: 1%; 
    background-image: url('images/background_image.jpg'); 
    background-repeat: no-repeat; 
} 

#topNav { 
    border: 2px solid black; 
    border-radius: 8px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 66%; 
    height: 5%; 
    text-align: center; 
    background-size: cover; 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    background-image: url('images/blurred_background.jpg'); 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-size: 2em; 
} 

nav a { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    float: left; 
    width: 15%; 
    height: 100%; 
    margin-right: 1%; 
} 

#left { 
    margin-left: 25%; 
} 

#topNav a:hover { 
    border-radius: 8px; 
    background-color: white; 
    color: black; 
}

編輯：下面是什麼它目前看起來像一個圖像的鏈接。我忘了補充這 http://puu.sh/ld0LM/2de7d95deb.jpg

編輯2：我被我的教練告訴改用％PX的儘可能使其擴展當瀏覽器窗口被改變，但它是合理使用％幾乎一切？我假設如果我將導航高度更改爲50或100像素左右，然後將我的行高設置爲相同，它將解決我的問題，但我無法使用％完成此操作。

來源

2015-11-07 Christian

只要求別人爲你做功課幾乎不能達到作業的目的。根據任務的延長情況，這可能會被認爲是作弊，這意味着當您的TA發現時，您可能會失敗。並相信我，我們TA是非常瞭解stackoverflow ;-) –

@Christain弗裏茨，不，我不想欺騙或做任何這樣的事情。我搜索了Google搜索了幾個小時，但找不到任何幫助我的東西。我想要的只是將文本居中。這個任務並不是簡單地將文本居中，而是創建一個完整的網站，但我只想讓我的導航欄看起來很漂亮。 – Christian

這可能不是您想要聽到的內容，但我認爲對於您（以及任何人）來說，執行正確導航欄最簡單的方法是使用表格/表格單元格屬性。當然，這只是一個建議，你可以通過其他方式實現它，但這基本上可以滿足你所有的需求和較少的代碼。 –

試試這個https://jsfiddle.net/7qovrydb/

CSS

#page { 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    padding: 1%; 
    background-image: url('images/background_image.jpg'); 
    background-repeat: no-repeat; 
} 

#topNav { 
    border: 2px solid black; 
    border-radius: 8px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 66%; 
    text-align: center; 
    background-size: cover; 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    background-color: #22756B; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-size: 2em; 
} 

nav a { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    height: 100%; 
    font-size: 20px; 
    padding: 10px; 
} 


#topNav a:hover { 
    border-radius: 8px; 
    background-color: white; 
    color: black; 
}

來源

2015-11-07 20:24:36

通過將line-height: 40px添加到它來更改您的nav a CSS。

nav a { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    float: left; 
    width: 15%; 
    height: 100%; 
    margin-right: 1%; 
    line-height: 40px; 
}

，或者如果你不喜歡這種方法，你可以添加這nav a：

position: relative; 
top: 50%; 
transform: translateY(-50%);

CODEPEN DEMO

來源

2015-11-07 20:14:33

這似乎有點幫助（稍微降低文本），但它仍然看起來像文本下面有更多的空間比上面。 – Christian

您可以根據自己的喜好調整該數字，並使用其他方法進行更新。 –

我想幫忙。你可以簡單地添加文本對齊：中心;給你導航一個CSS。

nav a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
\t text-align: center; 
 
    color: white; 
 
    float: left; 
 
    width: 15%; 
 
    height: 100%; 
 
    margin-right: 1%; 
 
}

來源

2015-11-07 20:28:37

水平對齊：添加text-align:center到nav a。
垂直對齊：嘗試將nav設置爲固定高度：例如80px，然後將line-height設置爲與80px相同的nav a。

#topNav { 
    border: 2px solid black; 
    border-radius: 8px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 66%; 
    height: 80px; 
    /* text-align: center;*/ 
    background-size: cover; 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    background-image: url('images/blurred_background.jpg'); 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-size: 2em; 
} 

nav a { 
    /* display: inline-block;*/ 
    padding:0px 1px 0px 1px; 
    border-radius: 8px; 
    text-align:center; 
    text-decoration: none; 
    color: white; 
    float: left; 
    width: 33%; 
    height: 100%; 
    line-height:80px; 
} 

#left { 
    /* margin-left: 25%;*/ 
} 

#topNav a:hover { 
    border-radius: 8px; 
    background-color: white; 
    color: black; 
}

來源

2015-11-07 20:28:52 alex

如果要在中間對齊文字，請使用text-align: center;。爲了確保文本的頂部和底部之間有相等的空間，請使用邊距。例如：margin: 10px 0px 10px 0px;。我使用px（像素）進行小調整，％（百分比）進行大調整。例如：要使容器的長度佔用頁面的一半，我將使用width: 50%;而不是width: 500px;

來源

2015-11-09 17:24:34 Lebone

在導航中對齊文本（水平和垂直）

回答

相關問題