按鈕居中並排
[英]Buttons centered and side by side
問題描述
我在將按鈕放在屏幕中央並排時遇到問題。 我只能成功地獲得另一個，但不能兩個都成功。 當前，使用以下代碼，這些按鈕可以並排放置，但仍位於屏幕的左上角。 下面是我當前設置的代碼。 注釋掉的行只是我嘗試過的一些東西。 任何幫助表示贊賞。
body { background-image: url("KDHub_Wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-color: #00ADEF; } .button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; display: inline-block; padding: 2px 8px; #margin: auto; #margin-top: 225px; #display: block; width: 300px; height: 60px; line-height: 60px; background-color: #941c2f; color: white; font-size: 24px; font-weight: 500; text-align: center; #border:0; #border-radius: 25px; padding: 5px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; #position: static; top: 50%; left: 50%; } .button:hover{ background: #C1CFDA; color: black }
<html> <head> <link rel="stylesheet" href="styles.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>KDHub</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="container"> <a href="https://test.url.com" class="button" target="_blank">Test 2</a> <a href="https:/test.url2.com" class="button" target="_blank">Test 2</a> </div> </body> </html>
3 個解決方案
解決方案1
1 2017-08-28 02:27:12
使用CSS flex 。 您可以在此處了解更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
在CSS中添加了以下代碼：
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
body { background-image: url("KDHub_Wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-color: #00ADEF; } .container { display: flex; justify-content: center; flex-direction: row; } .button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; display: inline-block; padding: 2px 8px; #margin: auto; #margin-top: 225px; #display: block; width: 300px; height: 60px; line-height: 60px; background-color: #941c2f; color: white; font-size: 24px; font-weight: 500; text-align: center; #border: 0; #border-radius: 25px; padding: 5px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; #position: static; top: 50%; left: 50%; } .button:hover { background: #C1CFDA; color: black }
<html> <head> <link rel="stylesheet" href="styles.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>KDHub</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="container"> <a href="https://test.url.com" class="button" target="_blank">Test 2</a> <a href="https:/test.url2.com" class="button" target="_blank">Test 2</a> </div> </body> </html>
解決方案2
1 2017-08-28 02:32:52
您的代碼很好，您只需要在按鈕的父元素中添加文本對齊中心即可使內聯塊居中
body { background-image: url("KDHub_Wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-color: #00ADEF; } /* Added */ .container{ text-align:center } .button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; display: inline-block; padding: 2px 8px; #margin: auto; #margin-top: 225px; #display: block; width: 200px; height: 60px; line-height: 60px; background-color: #941c2f; color: white; font-size: 24px; font-weight: 500; text-align: center; #border:0; #border-radius: 25px; padding: 5px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; #position: static; top: 50%; left: 50%; } .button:hover{ background: #C1CFDA; color: black }
<html> <head> <link rel="stylesheet" href="styles.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>KDHub</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="container"> <a href="https://test.url.com" class="button" target="_blank">Test 2</a> <a href="https:/test.url2.com" class="button" target="_blank">Test 2</a> </div> </body> </html>
解決方案3
1 已采納 2017-08-28 02:33:36
您正在結合使用margin-top和position: static ，這是行不通的。 您似乎還試圖通過top: 50%和left: 50%來控制位置。 top和left應使用絕對定位 ， marign-top應使用相對定位 。
使用display: flex ， align-items: center和justify-content: center屬性值，使用flexbox實現水平居中和垂直居中是最簡單的。 請注意，您還需要指定height屬性，以使flex生效：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
在以下示例中可以看到它的工作原理，其中我還修復了URL和一些無效屬性（在#之前）：
body { background-image: url("KDHub_Wallpaper.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-color: #00ADEF; } .button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; display: inline-block; padding: 2px 8px; margin: auto; display: block; width: 300px; height: 60px; line-height: 60px; background-color: #941c2f; color: white; font-size: 24px; font-weight: 500; text-align: center; border: 0; border-radius: 25px; padding: 5px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: static; } .button:hover { background: #C1CFDA; color: black; } .container { display: flex; align-items: center; justify-content: center; height: 200px; border: 1px solid black; }
<html> <head> <link rel="stylesheet" href="styles.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>KDHub</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="container"> <a href="https://test.url.com" class="button" target="_blank">Test 2</a> <a href="https://test.url2.com" class="button" target="_blank">Test 2</a> </div> </body> </html>
希望這可以幫助！ :)
分開並排居中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.