How to centre image on website in layout?

Question

I'm developing a website and totally cannot centre the Facebook logo on my website.

It still shows up a little to the right. My code:

.cont {
  background-color: #161616;
  font-family: 'Roboto', sans-serif;
  color: #FFFFFF;
}

.gridcontainer {
  display: grid;
  padding: 2%;
}

.website {
  text-align: justify;
  justify-items: center;
}

.cont-fluid {
  padding: 0;
  box-sizing: border-box;
  font-size: 135%;
}

#about {
  line-height: 1.5;
  font-size: 135%;
  padding-top: 1em;
  text-align: justify;
  margin-bottom: 7%;
  margin-top: 2%;
}

#fblogo {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  max-width: 20px;
}

<div class="cont">
  <div class="gridcontainer">
    <div class="website">
      <div class="cont-fluid" id="about">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div id="fblogo">
        <a href="{%https://www.facebook.com/" title="facebook" target="_blank">
          <img style="max-width: 80px;" src="{% static 'images/facebook.png' %}" alt="facebook">
        </a>
      </div>
    </div>
  </div>

I know it's not the best idea to use "display:grid", while I don't use it, but I also have a header of this website and if remove it or choose "display:block" a white, narrow line appear between header and rest of website, so I use grid, just because it works (but without it, the logo is still off-centre). How can I center it?

score 1 · Accepted Answer · answered Nov 22 '20 at 20:19

simply delete your entire css for the id #fblogo. A link is a text element and therfor can easily be centered with text-align: center;. Therefor your only css that you need for that id is: #fblogo { text-align: center; }.

.cont {
  background-color: #161616;
  font-family: 'Roboto', sans-serif;
  color: #FFFFFF;
}

.gridcontainer {
  display: grid;
  padding: 2%;
}

.website {
  text-align: justify;
  justify-items: center;
}

.cont-fluid {
  padding: 0;
  box-sizing: border-box;
  font-size: 135%;
}

#about {
  line-height: 1.5;
  font-size: 135%;
  padding-top: 1em;
  text-align: justify;
  margin-bottom: 7%;
  margin-top: 2%;
}

#fblogo {
  text-align: center;
}

<div class="cont">
  <div class="gridcontainer">
    <div class="website">
      <div class="cont-fluid" id="about">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div id="fblogo">
        <a href="{%https://www.facebook.com/" title="facebook" target="_blank">
          <img style="max-width: 80px;" src="{% static 'images/facebook.png' %}" alt="facebook">
        </a>
      </div>
    </div>
  </div>

score 1 · Answer 2 · answered Nov 22 '20 at 20:34

1

The problem with your case is that you made the max width for the div 20px while the img itself is 80px in width. #fblogo {max-width: 20px;} if you made the #fblogo max-width: 80px; it will work just fine.

answered Nov 22 '20 at 20:34

Mahmoud Nabil

11
2

score 0 · Answer 3 · answered Nov 22 '20 at 20:20

0

My first advice: don't use id as selector. Use id in js.

Instead #fblogo use :

.fblogo {
    display:flex;
   justify-content:center;
   align-items:center;
}

answered Nov 22 '20 at 20:20

Andrew

1
1

there is nothing wrong with using ID's there multiple reasons to use ID's outside ofJS. For example if you're templating or want to use anchors. – tacoshy Nov 22 '20 at 20:31

score 0 · Answer 4 · answered Nov 22 '20 at 20:22

0

in the img tag add this styling ,

<img ... style="display: block;margin-left: auto; margin-right:auto;"/>

answered Nov 22 '20 at 20:22

DevineDecrypter

151
1
16

1

he uses css so no need to create potencial other problems with the use of inline styling. Also `img` is an emty tag. it needs no slah to be closed. – tacoshy Nov 22 '20 at 20:30

How to centre image on website in layout?

4 Answers4