These Images are off center

Question

Trying to make contact information, the images are appearing far to the right of the page, when I want it centered, I've tried to put a right margin and padding, but it didn't work, I've removed code, but it didn't do anything. I don't know what else to try.

.contactinfo {
  float: left;
  border: 3px solid #189AB4;
  border-radius: 10px;
  text-align: center;
  margin-top: 20px;
  margin-left: 200px;
  width: 70%;
}

.border {
  float: left;
  background-color: #189AB4;
  margin-left: 125px;
  width: 75%;
  height: 4px;
}

a.contacts {
  background-color: transparent;
  border: none;
  width: 50px;
  height: 50px;
  margin-right: 50px;
  float: left;
}

a.contacts:hover {
  background-color: transparent;
  border: none;
  width: 50px;
  height: 50px;
  margin-right: 50px;
  float: left;
}

a {
  padding-top: 20px;
  text-decoration: none;
  text-align: center;
  background-color: #75E6DA;
  border-right: 2px #189AB4 solid;
  color: #189AB4;
  width: 100px;
  height: 40px;
  float: left;
}

  <div class="content">
    
    <div class="contactNav">
        
        <div class="contact">
            
            <a class="contacts" href="#discord"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/discord.png"></a>
            
            <a class="contacts" href="#email"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/email.png"></a>
            
            <a class="contacts" href="#phone"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/phone.png"></a>
            
        </div>
        
    </div>
    
</div>

But please share a [mre] of the situation. We're obviously not seeing everything. — Heretic Monkey, Aug 20 '21 at 18:16

score 0 · Answer 1 · answered Aug 20 '21 at 17:20

Gave your content class a display: flex and then set your contactNav class a margin: 0 auto

of course this might not be the exact solution since i'm not sure what else is supposed to be within those div blocks that are empty.

.contactinfo {
  float: left;
  border: 3px solid #189AB4;
  border-radius: 10px;
  text-align: center;
  margin-top: 20px;
  margin-left: 200px;
  width: 70%;
}

.border {
  float: left;
  background-color: #189AB4;
  margin-left: 125px;
  width: 75%;
  height: 4px;
}

a.contacts {
  background-color: transparent;
  border: none;
  width: 50px;
  height: 50px;
  margin-right: 50px;
  float: left;
}

a.contacts:hover {
  background-color: transparent;
  border: none;
  width: 50px;
  height: 50px;
  margin-right: 50px;
  float: left;
}

a {
  padding-top: 20px;
  text-decoration: none;
  text-align: center;
  background-color: #75E6DA;
  border-right: 2px #189AB4 solid;
  color: #189AB4;
  width: 100px;
  height: 40px;
  float: left;
}

/* Changes Made Below */

.content {
  display: flex;
}

.contactNav {
  margin: 0 auto;
}

<div class="content">
    
    <div class="contactNav">
        
        <div class="contact">
            
            <a class="contacts" href="#discord"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/discord.png"></a>
            
            <a class="contacts" href="#email"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/email.png"></a>
            
            <a class="contacts" href="#phone"><img src="file:///home/chronos/u-26c9237f54925ea49e23f69beb1df4df160b7039/MyFiles/School/Top5/Images/phone.png"></a>
            
        </div>
        
    </div>
    
</div>

I planned to use the empty divs to add headings/words, and it didn't work, I can give you the full code if you want. — LitNotFig, Aug 20 '21 at 17:43

kushyzee · Answer 2 · 2021-08-20T17:49:32.303

0

You can do this;

.contactNav {
   display: flex;
   justify-content: center;
}

That might help

edited Aug 20 '21 at 17:49

answered Aug 20 '21 at 17:44

kushyzee

1
3

It pushed it further to the left, but didn't center it – LitNotFig Aug 20 '21 at 17:46
this does work too but it's just the rest of your code conflicting – Brandon Aug 20 '21 at 17:49
You can drop a link to the entire code so we take a look at it – kushyzee Aug 20 '21 at 17:56
How do I link the entire code? – LitNotFig Aug 20 '21 at 18:10
This will not work with those `float`s and `margin`s everywhere... – Heretic Monkey Aug 20 '21 at 18:15
That's what I thought also, the floats are definitely interfering – kushyzee Aug 20 '21 at 19:18

These Images are off center

2 Answers2