Buttons centered and side by side
Question
I am having issues getting my buttons in the center of the screen and side by side. I have been only able to successfully get one of the other but not both. Currently with the below code the buttons are side by side, but stay at the top left corner of the screen. Below is the code I have currently set up. The commented out lines are just some things I have tried. Any help is appreciated.
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 answers
solution1
1 2017-08-28 02:27:12
Use CSS flex . You can learn more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Added the following code in your 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>
solution2
1 2017-08-28 02:32:52
Your code is fine you just have to add text-align center in the parent element of the buttons to center the inline blocks
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>
solution3
1 ACCPTED 2017-08-28 02:33:36
You're using margin-top in conjunction with position: static , which won't work. You also appear to be attempting to control the positioning with top: 50% and left: 50% . top and left should be used with absolute positioning , and marign-top should be used with relative positioning .
It's easiest to achieve both horizontal and vertical centering with flexbox , utilising the display: flex , align-items: center and justify-content: center property values. Note that you'll also need to specify a height property in order for flex to take effect:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
This can be seen working in the following example, where I've also fixed up the URL and some of the invalid properties (which were preceded with # ):
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>
Hope this helps! :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.