当我试图将链接居中时，它们只是向左对齐。我有两次这个问题，我找不到任何适合我的方法。当我使用flex时，按钮在div上拉伸，所以我调整宽度以适应内容，它们向左对齐。如何使链接居中？(我给按钮类的链接((对不起，我还是网络开发的新手(
*{
margin: 0px;
padding: 0px;
}
html{
cursor: url('media/cursor/cursor white.cur'), auto;
}
body{
background-image: url(gridbg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
font-family: fontywonty;
}
@font-face {
font-family: fontywonty;
src: url(/media/fonts/RobotoSlab-Light.ttf);
}
.content{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.page{
text-align: center;
background-color: white;
width: fit-content;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px 3px black;
}
.header{
color: rgb(26, 26, 26);
}
.buttons{
display: flex;
flex-direction: column;
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
width: fit-content;
}
a.button:hover{
background: rgb(63, 63, 63);
background: rgb(187, 187, 187);
}<!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="stylesheet" href="style.css">
<title>DSM-5</title>
</head>
<body>
<div class="content">
<div class="page">
<div class="header">
<h1>A comprensive summary of the DSM-5</h1>
</div>
<div class="main">
<div class="source">
<p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>
</div>
<div class="buttons">
<a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
<a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
<a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
<a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
<a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
<a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
<a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
<a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
<a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
<a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
<a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
<a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
<a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
<a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
<a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
<a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
<a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
<a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
<a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
<a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
</div>
</div>
<div class="footer">
<sub>created by sidney</sub>
</div>
</div>
</div>
</body>
</html>你正在努力做艰难的事情。绝对没有理由使用min/fit/max-content这样的"新"东西。只需按旧方法操作：使按钮为display: block，对父项执行相同操作(不需要到处使用flex！(，如果需要，请使用width: max-content限制链接宽度。我宁愿不限制宽度(删除width: max-content(，让链接跨越整行，因为有些(很多？(人也可以点击链接旁边的空白。而且CCD_ 7效应将跨越整条线路。
请记住，CSS功能，如min/fit/max-content值、flexboxes和网格、filter属性、object-fit属性和许多其他功能，只有在需要使用时才应使用。更喜欢display: block和inline-block的"旧"方法，你会得到更多浏览器支持的网页，通常绘制速度更快，使用更少的CSS行。我也喜欢使用flexbox，但只在有意义的地方(自动包装的块系列、列中的框等(
请不要覆盖整个页面的鼠标光标形状你多久看到一次这样的页面？当光标形状在没有合理原因的情况下发生变化时，用户可能会感到困惑(因为用户找不到光标(，一些有特定残疾的用户甚至可能无法使用页面只有在有充分理由的情况下才应该更改光标。
*{
margin: 0px;
padding: 0px;
}
html{
cursor: url('media/cursor/cursor white.cur'), auto;
}
body{
background-image: url(gridbg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
font-family: fontywonty;
}
@font-face {
font-family: fontywonty;
src: url(/media/fonts/RobotoSlab-Light.ttf);
}
.content{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.page{
text-align: center;
background-color: white;
width: fit-content;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px 3px black;
}
.header{
color: rgb(26, 26, 26);
}
.buttons{
display: block;
}
a.button {
display: block;
margin: auto;
width: max-content;
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
background: rgb(63, 63, 63);
background: rgb(187, 187, 187);
}<!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="stylesheet" href="style.css">
<title>DSM-5</title>
</head>
<body>
<div class="content">
<div class="page">
<div class="header">
<h1>A comprensive summary of the DSM-5</h1>
</div>
<div class="main">
<div class="source">
<p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>
</div>
<div class="buttons">
<a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
<a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
<a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
<a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
<a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
<a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
<a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
<a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
<a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
<a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
<a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
<a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
<a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
<a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
<a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
<a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
<a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
<a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
<a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
<a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
</div>
</div>
<div class="footer">
<sub>created by sidney</sub>
</div>
</div>
</div>
</body>
</html>此时所需的只是将align-items:center;添加到.buttons中，这样就可以了：
*{
margin: 0px;
padding: 0px;
}
html{
cursor: url('media/cursor/cursor white.cur'), auto;
}
body{
background-image: url(gridbg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
font-family: fontywonty;
}
@font-face {
font-family: fontywonty;
src: url(/media/fonts/RobotoSlab-Light.ttf);
}
.content{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.page{
text-align: center;
background-color: white;
width: fit-content;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px 3px black;
}
.header{
color: rgb(26, 26, 26);
}
.buttons{
display: flex;
flex-direction: column;
align-items:center; /* you needed this line*/
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
background: rgb(63, 63, 63);
background: rgb(187, 187, 187);
}<!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="stylesheet" href="style.css">
<title>DSM-5</title>
</head>
<body>
<div class="content">
<div class="page">
<div class="header">
<h1>A comprensive summary of the DSM-5</h1>
</div>
<div class="main">
<div class="source">
<p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>
</div>
<div class="buttons">
<a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
<a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
<a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
<a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
<a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
<a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
<a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
<a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
<a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
<a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
<a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
<a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
<a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
<a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
<a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
<a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
<a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
<a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
<a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
<a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
</div>
</div>
<div class="footer">
<sub>created by sidney</sub>
</div>
</div>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
html{
cursor: url('media/cursor/cursor white.cur'), auto;
}
body{
background-image: url(gridbg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
font-family: fontywonty;
}
@font-face {
font-family: fontywonty;
src: url(/media/fonts/RobotoSlab-Light.ttf);
}
.content{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.page{
text-align: center;
background-color: white;
width: fit-content;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px 3px black;
}
.header{
color: rgb(26, 26, 26);
}
.buttons{
display: flex;
flex-direction: column;
}
a.button {
color: rgb(0, 0, 0);
border: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.349);
}
a.button:hover{
background: rgb(63, 63, 63);
background: rgb(187, 187, 187);
}<!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="stylesheet" href="style.css">
<title>DSM-5</title>
</head>
<body>
<div class="content">
<div class="page">
<div class="header">
<h1>A comprensive summary of the DSM-5</h1>
</div>
<div class="main">
<div class="source">
<p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>
</div>
<div class="buttons">
<a href="/pages/Neurodevelopmental-Disorders.html" class="button">neurodevelopmental disorders</a>
<a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" class="button">Schizophrenia Spectrum and Other Psychotic Disorders</a>
<a href="/pages/Bipolar-and-Related-Disorders.html" class="button">Bipolar and Related Disorders</a>
<a href="/pages/Depressive-Disorders.html" class="button">Depressive Disorders</a>
<a href="/pages/Anxiety-disorders.html" class="button">Anxiety Disorders</a>
<a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" class="button">Obsessive-Compulsive and Related Disorders</a>
<a href="/pages/Trauma-and Stressor-Related Disorders.html" class="button">Trauma- and Stressor-Related Disorders</a>
<a href="/pages/Dissociative-Disorders.html" class="button">Dissociative Disorders</a>
<a href="pages/Somatic-Symptom-and-Related-Disorders.html" class="button">Somatic Symptom and Related Disorders</a>
<a href="/pages/Feeding-and-Eating-Disorders.html" class="button">Feeding and Eating Disorders</a>
<a href="/pages/Elimination-Disorders.html" class="button">Elimination Disorders</a>
<a href="/pages/Sleep-Wake-Disorders.html" class="button">Sleep-Wake Disorders</a>
<a href="/pages/Sexual-Dysfunctions.html" class="button">Sexual Dysfunctions</a>
<a href="/pages/Gender-Dysphoria.html" class="button">Gender Dysphoria</a>
<a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" class="button">Disruptive, Impulse-Control, and Conduct Disorders</a>
<a href="/pages/Substance-Related-and-Addictive-Disorders.html" class="button">Substance-Related and Addictive Disorders</a>
<a href="/pages/Neurocognitive-Disorders.html" class="button">Neurocognitive Disorders</a>
<a href="/pages/Personality-Disorders.html" class="button">Personality Disorders</a>
<a href="/pages/Paraphilic-Disorders.html" class="button">Paraphilic Disorders</a>
<a href="Other-Mental-Disorders,html" class="button">Other Mental Disorders</a>
</div>
</div>
<div class="footer">
<sub>created by sidney</sub>
</div>
</div>
</div>
</body>
</html>