title: CSS Bootstrap Centre All Items
body: <p>Im using a modified version of the grayscale bootstrap theme : <a href="https://startbootstrap.com/theme/grayscale" rel="nofollow noreferrer">https://startbootstrap.com/theme/grayscale</a></p>
  <p>I cant seem to get items that are not text to align in the centre. They all end up with loads of strange white space before (see screenshot where i've highlighted to show the whitespace)</p>
  <p>How to i create a css style to make sure its always centred?</p>
  <p>See the dropdown and img ive added is off to the right and not aligned with the text. Ideally i want it as compact as possible with no whitespace.</p>
  <pre><code>&lt;!-- Projects--&gt;
          &lt;section class=&quot;projects-section bg-light&quot; id=&quot;projects&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;!-- Featured Project Row--&gt;
                  &lt;div class=&quot;row align-items-center no-gutters mb-4 mb-lg-5&quot;&gt;
                      &lt;div class=&quot;col-xl-8 col-lg-7&quot;&gt;
                          &lt;div class=&quot;featured-text text-center text-center&quot;&gt;
                              &lt;form class=&quot;text-white-50 mx-auto mt-2 mb-5&quot; method=&quot;POST&quot; action=&quot;/result&quot;&gt;
                              &lt;h1&gt;Lineup:&lt;/h1&gt;
                              &lt;div class=&quot;text-pre&quot;&gt;
                              &lt;p&gt;&lt;h3&gt;&lt;b&gt;Team A: {{ scorea }}&lt;/b&gt;&lt;/h3&gt;&lt;/p&gt;
                              &lt;select id=&quot;changeImageA&quot;&gt;
                                  &lt;option&gt;other&lt;/option&gt;
                                  &lt;option&gt;blue&lt;/option&gt;
                                  &lt;option&gt;white&lt;/option&gt;
                                  &lt;option&gt;black&lt;/option&gt;
                                  &lt;option&gt;red&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;img id=&quot;imageA&quot; src='/static/other.png' width=&quot;50&quot; height=&quot;60&quot;&gt;
                              &lt;p&gt;{% for player in teama %}{{ player }}&lt;br&gt;{% endfor %}&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;text-pre&quot;&gt;
                              &lt;p&gt;&lt;h3&gt;&lt;b&gt;Team B: {{ scoreb }}&lt;/b&gt;&lt;/h3&gt;&lt;/p&gt;
                              &lt;select id=&quot;changeImageB&quot;&gt;
                                  &lt;option&gt;other&lt;/option&gt;
                                  &lt;option&gt;blue&lt;/option&gt;
                                  &lt;option&gt;white&lt;/option&gt;
                                  &lt;option&gt;black&lt;/option&gt;
                                  &lt;option&gt;red&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;img id=&quot;imageB&quot; src='/static/other.png' width=&quot;50&quot; height=&quot;60&quot;&gt;
                              &lt;p&gt;{% for player in teamb %}{{ player }}&lt;br&gt;{% endfor %}&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;h3&gt;&lt;b&gt;Save lineup?&lt;/b&gt;&lt;/h3&gt;
                              &lt;input class=&quot;btn btn-primary js-scroll-trigger&quot; type=&quot;submit&quot; name=&quot;submit_button&quot; value=&quot;Store&quot;&gt;
                              &lt;input class=&quot;btn btn-primary js-scroll-trigger&quot; type=&quot;submit&quot; name=&quot;submit_button&quot; value=&quot;Rerun&quot;&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/j2les.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j2les.png" alt="Example" /></a></p>
  <p>Here is my version of the style.css:</p>
  <p><a href="https://github.com/bignellrp/footyapp/blob/main/static/styles.css" rel="nofollow noreferrer">https://github.com/bignellrp/footyapp/blob/main/static/styles.css</a></p>
  <p>I tried the following but it made no difference, although im not sure how to auto clear css cache.</p>
  <p>CSS</p>
  <pre><code>.center-item {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
  .center-text {
  text-align: center;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;center-item&quot;&gt; &lt;select id=&quot;changeImageA&quot;&gt;
  </code></pre>
  <p>URL</p>
  <p><a href="https://www.w3schools.com/css/css_align.asp" rel="nofollow noreferrer">https://www.w3schools.com/css/css_align.asp</a></p>