0

my page is structured like this:

<body>
  <a href="...">
    <img src="..." height="160" width="261">
    <img src="..." height="160" width="160">
  </a>
</body>
  • what's the best way to make these two pictures exactly in the middle (next to each other) for every device?
  • is it possible to do without an additional div?
  • please don't ask me to use tables

thanks in advance

danny
  • 21
  • 3
  • 1
    Possible duplicate of [How to horizontally center a
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div)
     – Sean Mar 06 '19 at 00:03

2 Answers2

0
     a {
        display: flex;
        width:auto;
     }
Mr Coder
  • 66
  • 6
0

In many ways you can achieve this. If you want to keep the html structure same, then you can position your anchor tag followed by 50% horizontal & vertical spacing and push it back of it's own height & width.

a{
  position: absolute;
  top: 50%; left: 50%; /* push it to vertically & horizontally */
  transform: translate(-50%, -50%); /* push it back of it's own width & height */
}

View the demo

Shihab
  • 199
  • 1
  • 16
  • seems that I was making it too complex :) thanx! btw do you know how to make these pics stick next to each other? for now when the window is narrow the second pic goes below the first one – danny Mar 06 '19 at 11:10
  • You can add a width value. `a{ width: 426px; }` – Shihab Mar 06 '19 at 12:03