Home > Enterprise >  my links align left when i use max width:fit content
my links align left when i use max width:fit content

Time：03-22

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 >
        <div >
            <div >
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div >
                <div >
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div >
                    <a href="/pages/Neurodevelopmental-Disorders.html" >neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" >Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" >Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" >Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" >Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" >Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" >Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" >Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" >Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" >Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" >Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" >Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" >Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" >Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" >Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" >Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" >Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" >Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" >Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" >Other Mental Disorders</a>
                </div>
            </div>
            <div >
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

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. I would prefer to not limit the width (remove the width: max-content) and let the links span whole line, because some (many?) people could also click to the white space next to the link. And also the :hover effect would span whole line.

Remember that CSS features like min/fit/max-content values, flexboxes and grid, filter property, object-fit property and many others should be used only when it is necessary to use them. Prefer the “old” approach with display: block and inline-block and you will get webpage that is supported by more browsers, usually also draws faster and you use less lines of CSS. I also like using flexbox, but only at places where it makes sense (auto-wrapped series of blocks, boxes in columns etc.).

And please do not override the mouse cursor shape for whole page. How often do you see pages that do that? When the cursor shape changes without some reasonable reason, the user can get confused (because the user is not able to find the cursor) and some users with some specific disabilities can be even unable to work with the page. Changing the cursor is also a thing that should be done only when there is good reason for it.

*{
    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 >
        <div >
            <div >
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div >
                <div >
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div >
                    <a href="/pages/Neurodevelopmental-Disorders.html" >neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" >Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" >Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" >Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" >Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" >Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" >Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" >Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" >Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" >Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" >Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" >Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" >Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" >Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" >Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" >Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" >Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" >Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" >Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" >Other Mental Disorders</a>
                </div>
            </div>
            <div >
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

All you needed at this point is to add align-items:center; to .buttons and it would work, like so:

*{
    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 >
        <div >
            <div >
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div >
                <div >
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div >
                    <a href="/pages/Neurodevelopmental-Disorders.html" >neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" >Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" >Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" >Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" >Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" >Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" >Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" >Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" >Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" >Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" >Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" >Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" >Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" >Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" >Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" >Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" >Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" >Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" >Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" >Other Mental Disorders</a>
                </div>
            </div>
            <div >
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

*{
    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 >
        <div >
            <div >
                <h1>A comprensive summary of the DSM-5</h1>
            </div>
            <div >
                <div >
                    <p>source: <a href="https://en.wikipedia.org/wiki/DSM-5">DSM-5</a></p>    
                </div>
                <div >
                    <a href="/pages/Neurodevelopmental-Disorders.html" >neurodevelopmental disorders</a>
                    <a href="/pages/Schizophrenia-Spectrum-and-Other-Psychotic-Disorders.html" >Schizophrenia Spectrum and Other Psychotic Disorders</a>
                    <a href="/pages/Bipolar-and-Related-Disorders.html" >Bipolar and Related Disorders</a>
                    <a href="/pages/Depressive-Disorders.html" >Depressive Disorders</a>
                    <a href="/pages/Anxiety-disorders.html" >Anxiety Disorders</a>
                    <a href="/pages/Obsessive-Compulsive-and Related-Disorders.html" >Obsessive-Compulsive and Related Disorders</a>
                    <a href="/pages/Trauma-and Stressor-Related Disorders.html" >Trauma- and Stressor-Related Disorders</a>
                    <a href="/pages/Dissociative-Disorders.html" >Dissociative Disorders</a>
                    <a href="pages/Somatic-Symptom-and-Related-Disorders.html" >Somatic Symptom and Related Disorders</a>
                    <a href="/pages/Feeding-and-Eating-Disorders.html" >Feeding and Eating Disorders</a>
                    <a href="/pages/Elimination-Disorders.html" >Elimination Disorders</a>
                    <a href="/pages/Sleep-Wake-Disorders.html" >Sleep-Wake Disorders</a>
                    <a href="/pages/Sexual-Dysfunctions.html" >Sexual Dysfunctions</a>
                    <a href="/pages/Gender-Dysphoria.html" >Gender Dysphoria</a>
                    <a href="/pages/Disruptive-Impulse-Control-and-Conduct=Disorders.html" >Disruptive, Impulse-Control, and Conduct Disorders</a>
                    <a href="/pages/Substance-Related-and-Addictive-Disorders.html" >Substance-Related and Addictive Disorders</a>
                    <a href="/pages/Neurocognitive-Disorders.html" >Neurocognitive Disorders</a>
                    <a href="/pages/Personality-Disorders.html" >Personality Disorders</a>
                    <a href="/pages/Paraphilic-Disorders.html" >Paraphilic Disorders</a>
                    <a href="Other-Mental-Disorders,html" >Other Mental Disorders</a>
                </div>
            </div>
            <div >
                <sub>created by sidney</sub>
            </div>
        </div>
    </div>
</body>
</html>

Page link：https//www.codepudding.com/Enterprise/343667.html

Prev:Little lines next to my fontawesome icons?
Next:combine tabs and grid layout
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding