How do I center/align images within a div?

Question

I have three image buttons on my site that i'd like to align, side-by-side in the center at the top of my site. Here's the code.

the images are within a div, but they aren't really aligning at all.

i've tried margin: auto and display: block but i'm a noob here, so i'm not sure what else to do.

.buttons {
  height: 100px;
  width: 612px;
  margin: auto auto;
  display: block;
}

<div class="buttons">
  <a href="http://apophis.neocities.org"><img src="HOME.png" class="HOME" title="HOME" alt="HOME"></a>
  <a href=""><img src="INDEX.png" class="INDEX" title="INDEX" alt="INDEX"></a>
  <a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-29888-d9"><img src="GUESTBOOK.png" class="GUESTBOOK" title="GUESTBOOK" alt="GUESTBOOK"></a>
</div>

user9408899 · Answer 1 · 2019-08-18T06:32:40.713

1

You can use flexbox layout model to center elements. Like this:

.buttons {
  height: 100px;
  width: 612px;
  display: flex;
  justify-content: center;
  align-items: center;
}

See demo below.

.buttons {
  height: 100px;
  width: 612px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}

<div class="buttons">
  <a href="http://apophis.neocities.org"><img src="HOME.png" class="HOME" title="HOME" alt="HOME"></a>
  <a href=""><img src="INDEX.png" class="INDEX" title="INDEX" alt="INDEX"></a>
  <a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-29888-d9"><img src="GUESTBOOK.png" class="GUESTBOOK" title="GUESTBOOK" alt="GUESTBOOK"></a>
</div>

edited Aug 18 '19 at 06:32

answered Aug 18 '19 at 06:05

user9408899

4,202
3
19
32

1

@AmareshSM It will. – user9408899 Aug 18 '19 at 06:27
yes it works.it will align center within a div .what i thought is the user wants to align the div at center of the page. @user9408899 – Amaresh S M Aug 18 '19 at 06:36
@p4rad1s3 Please consider accepting my answer. Because it solves your problem. – user9408899 Aug 18 '19 at 09:17

score 0 · Answer 2 · answered Aug 18 '19 at 06:06

0

If I'm understanding correctly, you can use

  text-align: center;

See: https://jsfiddle.net/3ao7sqtg/

answered Aug 18 '19 at 06:06

roverred

1,841
5
29
46

How do I center/align images within a div?

2 Answers2

See demo below.