我怎樣才能使這個“開始”按鈕在這個標題下方居中？
[英]How can I center this "Get Started "button below this title?
問題描述
我做了這個“開始”按鈕。 我想把它放在標題“一部電影中的所有回憶”下面。 我嘗試對齊它，但它不起作用。
* { margin: 0; padding: 0; } body{ height: 100vh; width: 50vh; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg); background-size: cover; background-position: center; } nav{ width: 100%; height: 80px; position: fixed; } .logo{ float: left; padding: 0 30px; margin-left: 55px; margin-right: 30px; width: 50px; margin-top: 20px; } ul li{ list-style: none; display: inline-block; line-height: 90px; padding: 0 31px; } ul{ margin-left: 840px; } ul li a{ text-decoration: none; font-size: 20px; font-family: 'Roboto Condensed', sans-serif; color: rgb(250, 250, 250); } ul li a:hover { color: rgb(102, 151, 241); transition-duration: 0.5s; } #text{ transform: uppercase; color: white; font-family: 'Poppins', sans-serif; text-align: center; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; } #button1{ background-color: rgb(30, 109, 255); border: none; border-radius: 15px 50px; color: white; padding: 35px; margin: 22px; text-align: center; font-size: 13px; font-family: 'Poppins', Helvetica; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PRODUX NA</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel = "stylesheet" type = "text/css" href = "reset.css"/> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <nav> <a href="index.html"> <img class="logo" src="1 NA.png" width="50" height="50"> </a> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Me</a> </li> <li> <a href="contacts.html">Contacts</a> </li> <li> <a href="portfolio.html">Portfolio</a> </li> </ul> </nav> <div id="text"> </div> <script type = "text/javascript"> var i = 0,text; text = "All your favorite memories in one film." function typing(){ if(i < text.length){ document.getElementById("text").innerHTML += text.charAt(i); i++ setTimeout(typing, 50); } } typing(); </script> <div class="container"> <button id="button1">Get Started</button> </div> </body> </html>
該按鈕位於 javascript 函數下方。 id 是“button1”，容器的 id 只是“container”。 正如您在 CSS 文件中看到的，我使用了 text-align 命令。
此外，我還嘗試將內容對齊到中心並將所有項目對齊到標題下方的中心（使用 Javascript 函數）。 幫助將不勝感激。
3 個解決方案
解決方案1
0 2021-07-22 01:16:47
主要問題是具有absolute位置的文本。 要將按鈕定位在文本下方，持有按鈕的容器也必須定位為absolute 。 這也將依次對齊按鈕。
將此添加到樣式中：
.container {
position: absolute;
bottom: -25px;/*give enough space to the text above*/
left: 50%;/*to horizontally center it*/
transform: translateX(-50%);/*to horizontally center it*/
}
這會將按鈕定位在文本的底部。
解決方案2
0 2021-07-22 01:20:16
嘗試將按鈕的父 div 更改為具有text-center的類，並將.text-center添加到您的 CSS。
所以你會有 HTML：
<div class="text-center">
<button id="button1">Get Started</button>
</div>
對於您的 CSS：
.text-center {
text-align: center;
}
解決方案3
0 已采納 2021-07-22 01:26:58
我正在盡我最大的努力使更改對您的項目保持真實，而無需重組您的 html。 根據您如何使用它，有更好的方法來構建您的 html。
我做的第一件事是為要嵌套在其中的文本和按鈕創建一個容器。 然后我用另一個容器內的按鈕移動了你的文本 div 和容器 div。 然后，我將您的許多絕對定位從您的#text樣式移到了#textAndButtonContainer 。 然后，我使用display: flex來允許 flexbox 樣式/居中，因為我發現這是居中的最簡單方法。
希望這會有所幫助！
* { margin: 0; padding: 0; } body { height: 100vh; width: 50vh; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg); background-size: cover; background-position: center; } nav { width: 100%; height: 80px; position: fixed; } .logo{ float: left; padding: 0 30px; margin-left: 55px; margin-right: 30px; width: 50px; margin-top: 20px; } ul li{ list-style: none; display: inline-block; line-height: 90px; padding: 0 31px; } ul{ margin-left: 840px; } ul li a{ text-decoration: none; font-size: 20px; font-family: 'Roboto Condensed', sans-serif; color: rgb(250, 250, 250); } ul li a:hover { color: rgb(102, 151, 241); transition-duration: 0.5s; } #text{ transform: uppercase; color: white; font-family: 'Poppins', sans-serif; text-align: center; margin: 0; font-size: 60px; } #textAndButtonContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; border: 1px solid red; } .container { display: flex; justify-content: center; } #button1{ background-color: rgb(30, 109, 255); border: none; border-radius: 15px 50px; color: white; padding: 35px; margin: 22px; text-align: center; font-size: 13px; font-family: 'Poppins', Helvetica; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PRODUX NA</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel = "stylesheet" type = "text/css" href = "reset.css"/> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet"> </head> <body> <nav> <a href="index.html"> <img class="logo" src="1 NA.png" width="50" height="50"> </a> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Me</a> </li> <li> <a href="contacts.html">Contacts</a> </li> <li> <a href="portfolio.html">Portfolio</a> </li> </ul> </nav> <div id="textAndButtonContainer"> <div id="text"> </div> <div class="container"> <button id="button1">Get Started</button> </div> </div> <script type = "text/javascript"> var i = 0,text; text = "All your favorite memories in one film." function typing(){ if(i < text.length){ document.getElementById("text").innerHTML += text.charAt(i); i++ setTimeout(typing, 50); } } typing(); </script> </body> </html>
解決方案4
0 2022-01-22 02:50:16
哈佛在哪里，Harverd 是哪一年建成的，進入哈佛需要什么
"
如何將按鈕和輸入對齊在同一行上，並使它們的結果顯示在兩者下方？
[英]How can I align button and input on the same line and get their results to display below both?
我最近開始學習 Graphs 中的周期檢測。 如何使用下面的代碼檢測循環？ 代碼顯示沒有循環，但有一個循環
[英]I recently started learning cycles detection in Graphs. How can I detect the cycle with the code below? The code show no cycle but there is a cycle
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.