alignment issue with justify content - reactjs app

Question

I need the options 1,2,3,4 to be aligned in a straight line.
options 3 and 4 are centred. it should be aligned with 1 and 2.
how do I change this?

My css code is as below: result-box is the container. results-header is the "Poll results" and the options are in "results". I have used justify-content "stretch" but it doesn't work.

.result-box {
  background-color:#E8E8E8;
}

.results-header {
  color: grey;
  font-size: 20px;
  font-family: 'Gill Sans';
  margin: 0px;
  padding-top: 2px;
}

.results {
  color:#00B2EE;
  align-items: center;
  justify-content: stretch;
  font-size: 20px;
  font-family: 'Gill Sans';
  margin: 0px;
}

Please post a working code example or at least minimal HTML+css required to reproduce the problem. — Dhruvi Makvana, Nov 06 '20 at 08:23
I would advise with no html given look at this flex-box web page https://yoksel.github.io/flex-cheatsheet/ you have all ins and outs of flex-box and with trial an error you will succeed however I am having a feeling that ```flex-direction:column``` might solve problem but can't say much cause I no html — Ntshembo Hlongwane, Nov 06 '20 at 08:27

score 0 · Accepted Answer · answered Nov 06 '20 at 08:21

0

You need to specify the display: flex propyerty for align-items and justify-content to work :)

answered Nov 06 '20 at 08:21

Yaiza del Río

106
3

score 0 · Answer 2 · answered Nov 06 '20 at 08:43

0

Use display: flex; with .result class. Here try this one w3schools-css-align

answered Nov 06 '20 at 08:43

Navindu Kavishka

47
1
10

use this link to find how to align center https://www.w3schools.com/css/css_align.asp – Navindu Kavishka Nov 06 '20 at 08:44
I can fix it for you if you attach the code somewhere – Navindu Kavishka Nov 06 '20 at 08:45

score 0 · Answer 3 · answered Nov 06 '20 at 08:55

Here is an example with the four items correctly aligned to the left.

.results {
  text-align: center;
}

.results-title {
  margin: 0
}

.results-content {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  padding-left: 0;
}

<div class="results">
  <h3 class="results-title">Poll results:</h1>
  <ol class="results-content">
    <li>Node.js</li>
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
  </ol>
</div>

alignment issue with justify content - reactjs app

3 Answers3