英文:
CSS, how to center the button inside the div box?
问题
你想要将放在名为 newGame 的 div 类中的“New Game”按钮居中。
英文:
this is my first time posting I'm fairly new in front-end web development. I'm having a hard time positioning some of my elements, especially this one every time I change something it doesn't meet my desired position for my button I just need to center it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1B244A;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: 'cursed timer', sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9AABD8;
border-radius: 5px;
color: white;
}
.newGame {}
.newGame button {}
<!-- language: lang-html -->
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
<!-- end snippet -->
I'm trying to figure out how to center the new game button that I put in a div class called newGame it always stays in the right corner.
答案1
得分: 0
使用flex属性**align-items: center;**来在水平方向的flex-direction中垂直居中任何div元素
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1b244a;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: "cursed timer", sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
}
.newGame {
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
注：代码部分已排版，但不包含代码翻译。
英文:
Use flex property align-items: center; to center any div element vertically when flex-direction in horizontal
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-around;
background: #1b244a;
width: 575px;
height: 385px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
position: relative;
top: 25px;
}
.scoreBox {
background: black;
width: 155px;
height: 120px;
border-radius: 5px;
text-align: center;
}
.scoreBox h1 {
font-size: 90px;
color: red;
padding: 10px 0;
font-family: "cursed timer", sans-serif;
}
.scoreBtn {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
}
.newGame {
display: flex;
align-items: center;
}
.newGame button {
}
<!-- language: lang-html -->
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
尝试这个，看看是否适用于你，你可以随时更改数值以匹配按钮的位置，以满足你的需求。
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
英文:
Try this and see if it works for you, and you can always change the values to match the position of button according to your need.
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论