when i try to center my links they just align left. ive has this problem twice and i cant find anything that works for me.
when i use flex the buttons are stretched across the div, so i adjust the width to fit content and they align left.
how do i center the links? (the links that i gave the button class)
(im still new to web development, sorry)
*{
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>>Solution :
You are trying to do the hard way. There is absolutely no reason for using something “new” as min/fit/max-content. Just do it the old way: make the buttons display: block, do the same for the parent (You do not need to use flex everywhere!) and if you want, limit the link width using width: max-content.
*{
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>