Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Flex Box buttons not centering

byMR
June 21, 2022

can somebody please help I keep having this problem where my .buttons section is not centered and I can’t seem to fix it, I want it to be centered, also when I try to make my window bigger or smaller it stays that way it never centers, I already added align-items and justify-content to center but makes almost no change.
thanks!

Snippet:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/****************************/

h1 {
  text-align: center;
}

html {
  box-sizing: border-box;
  /*! ????*/
  font-family: 'Heebo', sans-serif;
}

h1 {
  font-size: 2em;
  padding: 10px;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  height: 450px;
  width: 60%;
  background-color: rgb(107, 111, 168);
  border-radius: 10px;
  border: 5px solid rgb(89, 93, 140);
  border-bottom: 20px solid rgb(89, 93, 140);
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  padding: 25px 5px 10px 5px;
  /* Arriba | Derecha | Abajo | Izquierda */
  /* flex: 1 2 250px; */
  /* flex grow | flex shrink | flex bais*/
  /*! ????*/
}

#display {
  background-color: rgb(112, 234, 211);
  border-radius: 15px;
  padding: 25px;
  font-size: 40px;
  width: 75%;
  margin: 5% auto;
  border-bottom: 10px solid rgb(86, 176, 159);
  text-align: right;
}

.buttons {
  /* flex-flow: column wrap; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Arriba | Derecha | Abajo | Izquierda */
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* flex grow | flex shrink | flex bais*/
  font-family: 'Heebos', sans-serif;
  width: 50%;
}

.button {
  font-size: 30px;
  /* text-align: center; */
  border-radius: 15px;
  color: black;
  margin: 5px;
  background-color: white;
  width: 20%;
  font-family: 'Heebos', sans-serif;
  border: white;
  border-bottom: 6px solid rgb(211, 211, 211);
}


/* flex:2 1 400px; */


/* takes twice amount of extra space */

#cl {
  background-color: rgb(255, 42, 0);
  border-bottom: 6px solid rgb(205, 34, 0);
}

#equals {
  background-color: rgb(255, 136, 0);
  border-bottom: 6px solid rgb(217, 116, 0);
  width: 40%;
  /* flex-shrink: 1; */
}


/* @media (max-width: 600px) {
    
        .buttons {
            width: 100%;
            font-size: 20px;
        }
    
        #display {
            font-size: 30px;
        }
    }
<body>
  <h1>Calculator</h1>

  <div class="container">
    <div id="display">0</div>
    <section class="buttons">
      <button class="button" id="cl">C</button>
      <button class="button" id="percent">%</button>
      <button class="button" type="button" id="sign">+/-</button>
      <button class="button" id="div">/</button>

      <button id="sevem" class="button">7</button>
      <button id="eight" class="button">8</button>
      <button id="nine" class="button">9</button>
      <button class="button" id="mult">x</button>
      <button id="four" class="button">4</button>
      <button id="five" class="button">5</button>
      <button id="six" class="button">6</button>
      <button class="button" id="sub">-</button>
      <button id="one" class="button">1</button>
      <button id="two" class="button">2</button>
      <button id="three" class="button">3</button>
      <button class="button" id="add">+</button>
      <button id="zero" class="button">0</button>
      <button id="dot" class="button">.</button>
      <button class="button" id="equals">=</button>
    </section>
  </div>
</body>

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Here is my code:
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">
    <title>Calculator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@615&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <h1>Calculator</h1>

    <div class="container">
        <div id="display">0</div>
        <section class="buttons" >
            <button class="button" id="cl">C</button>
            <button class="button" id="percent">%</button>
            <button class="button" type="button" id="sign">+/-</button>
            <button class="button" id="div">/</button>

            <button id="sevem" class="button">7</button>
            <button id="eight" class="button">8</button>
            <button id="nine" class="button">9</button>
            <button class="button" id="mult">x</button>
            <button id="four" class="button">4</button>
            <button id="five" class="button">5</button>
            <button id="six" class="button">6</button>
            <button class="button" id="sub">-</button>
            <button id="one" class="button">1</button>
            <button id="two" class="button">2</button>
            <button id="three" class="button">3</button>
            <button class="button" id="add">+</button>
            <button id="zero" class="button">0</button>
            <button id="dot" class="button">.</button>
            <button class="button" id="equals">=</button>
        </section>
    </div>

<script src="index.js"></script>


</body>

</html>**

css:

**/* path: live-server --no-css-inject */

html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio,

video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav,

section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/****************************/
h1 {
    text-align: center;
}

html {
    box-sizing: border-box;
    /*! ????*/
    font-family: 'Heebo', sans-serif;
}

h1 {
    font-size: 2em;
    padding: 10px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    height: 450px;
    width: 60%;
    background-color: rgb(107, 111, 168);
    border-radius: 10px;
    border: 5px solid rgb(89, 93, 140);
    border-bottom: 20px solid rgb(89, 93, 140);

    align-items: center;
    justify-content: center;
    margin: 10px auto;
    padding: 25px 5px 10px 5px;
    /* Arriba | Derecha | Abajo | Izquierda */
    /* flex: 1 2 250px; */
    /* flex grow | flex shrink | flex bais*/
    /*! ????*/
}

#display {
    background-color: rgb(112, 234, 211);
    border-radius: 15px;
    padding: 25px;
    font-size: 40px;
    width: 75%;
    margin: 5% auto;
    border-bottom: 10px solid rgb(86, 176, 159);
    text-align: right;
}

.buttons {
    /* flex-flow: column wrap; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Arriba | Derecha | Abajo | Izquierda */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* flex grow | flex shrink | flex bais*/
    font-family: 'Heebos', sans-serif;
    width: 50%;
}

.button {
    font-size: 30px;
    /* text-align: center; */
    border-radius: 15px;
    color: black;
    margin: 5px;
    background-color: white;
    width: 20%;
    font-family: 'Heebos', sans-serif;
    border: white;
    border-bottom: 6px solid rgb(211, 211, 211);
}


/* flex:2 1 400px; */
/* takes twice amount of extra space */

#cl {
    background-color: rgb(255, 42, 0);
    border-bottom: 6px solid rgb(205, 34, 0);
}

#equals {
    background-color: rgb(255, 136, 0);
    border-bottom: 6px solid rgb(217, 116, 0);
    width: 40%;
    /* flex-shrink: 1; */
}

/* @media (max-width: 600px) {

    .buttons {
        width: 100%;
        font-size: 20px;
    }

    #display {
        font-size: 30px;
    }
} */**

>Solution :

Just edited .buttons section

  • display: flex
  • flex-direction: row
  • flex-wrap: wrap

Didn’t try to remove unnecessary styles

html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio,

video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav,

section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/****************************/
h1 {
    text-align: center;
}

html {
    box-sizing: border-box;
    /*! ????*/
    font-family: 'Heebo', sans-serif;
}

h1 {
    font-size: 2em;
    padding: 10px;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    height: 450px;
    width: 60%;
    background-color: rgb(107, 111, 168);
    border-radius: 10px;
    border: 5px solid rgb(89, 93, 140);
    border-bottom: 20px solid rgb(89, 93, 140);

    align-items: center;
    justify-content: center;
    margin: 10px auto;
    padding: 25px 5px 10px 5px;
    /* Arriba | Derecha | Abajo | Izquierda */
    /* flex: 1 2 250px; */
    /* flex grow | flex shrink | flex bais*/
    /*! ????*/
}

#display {
    background-color: rgb(112, 234, 211);
    border-radius: 15px;
    padding: 25px;
    font-size: 40px;
    width: 75%;
    margin: 5% auto;
    border-bottom: 10px solid rgb(86, 176, 159);
    text-align: right;
}

.buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-flow: column wrap; */
    justify-content: center;
    align-items: center;
    /* Arriba | Derecha | Abajo | Izquierda */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* flex grow | flex shrink | flex bais*/
    font-family: 'Heebos', sans-serif;
    width: auto;
}

.button {
    font-size: 30px;
    /* text-align: center; */
    border-radius: 15px;
    color: black;
    margin: 5px;
    background-color: white;
    width: 20%;
    font-family: 'Heebos', sans-serif;
    border: white;
    border-bottom: 6px solid rgb(211, 211, 211);
}


/* flex:2 1 400px; */
/* takes twice amount of extra space */

#cl {
    background-color: rgb(255, 42, 0);
    border-bottom: 6px solid rgb(205, 34, 0);
}

#equals {
    background-color: rgb(255, 136, 0);
    border-bottom: 6px solid rgb(217, 116, 0);
    width: 40%;
    /* flex-shrink: 1; */
}
<body>
    <h1>Calculator</h1>

    <div class="container">
        <div id="display">0</div>
        <section class="buttons" >
            <button class="button" id="cl">C</button>
            <button class="button" id="percent">%</button>
            <button class="button" type="button" id="sign">+/-</button>
            <button class="button" id="div">/</button>

            <button id="sevem" class="button">7</button>
            <button id="eight" class="button">8</button>
            <button id="nine" class="button">9</button>
            <button class="button" id="mult">x</button>
            <button id="four" class="button">4</button>
            <button id="five" class="button">5</button>
            <button id="six" class="button">6</button>
            <button class="button" id="sub">-</button>
            <button id="one" class="button">1</button>
            <button id="two" class="button">2</button>
            <button id="three" class="button">3</button>
            <button class="button" id="add">+</button>
            <button id="zero" class="button">0</button>
            <button id="dot" class="button">.</button>
            <button class="button" id="equals">=</button>
        </section>
    </div>

<script src="index.js"></script>


</body>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading