英文:
How to centre a div (or any content)
问题
我在页面中添加了一个小的div，作为一种很酷的方式来显示3个选择选项，但它显示在左侧。我不太确定我需要使用什么来将这个div“card”显示在中间。我尝试过Align-items，align-content甚至text-align，但都不起作用，我不知道是否还有其他选项。
body {
background: #212121;
margin: 0;
}
header {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #ff568e;
border-bottom: 4px dashed #ff568e;
}
.card {
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #212121;
border: 1px solid #ff5a91;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #ff568e;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
请问有人能告诉我如何居中显示它？
英文:
I added a small div in my page as a cool way to display 3 options to choose, but it's showing the box in the left side. I don't know exactly what I need to use so it displays the div "card" in the middle. I tried Align-items,align-content and even text align but none of them works and I don't know if there is any other option.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body{
background: #212121;
margin: 0;
}
header{
text-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
color: #ff568e;
border-bottom: 4px dashed #ff568e;
}
.card {
align-items: center;
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #212121;
border: 1px solid #ff5a91;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #ff568e;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<title>Juego</title>
</head>
<body>
<header>
<h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
<h2>A continuación, podrás elegir los diferentes niveles...</h2>
<h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
</header>
<div class="card">
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
</div>
</body>
</html>
<!-- end snippet -->
Please, someone let me know what I need to do to center it.
答案1
得分: 1
在你的卡片类中添加这一行：margin: 0 auto;
.card {
margin: 0 auto;
/* 其他样式属性 */
}
英文:
Add to your card class this line: margin: 0 auto;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body{
background: #212121;
margin: 0;
}
header{
text-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
color: #ff568e;
border-bottom: 4px dashed #ff568e;
}
.card {
margin: 0 auto;
align-items: center;
width: 210px;
height: 254px;
border-radius: 4px;
background: #212121;
display: flex;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #212121;
border: 1px solid #ff5a91;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #ff568e;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<title>Juego</title>
</head>
<body>
<header>
<h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
<h2>A continuación, podrás elegir los diferentes niveles...</h2>
<h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
</header>
<div class="card">
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
<p><span>HOVER ME</span></p>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论