CODEWITHSUNDEEP
htmlcss
timBob
timBob

Reputation: 27

Horizontally align a row of images (buttons) that don't wrap on mobile

Having problems with this - a simple row of buttons that need to stay centered without wrapping on mobile. I've stripped the html of extraneous detail. It's a WordPress site and the theme's container/section system lets the text flow over the button container on mobile resolutions, but that's a side issue.

/* button row centered in a container */

    .buttonContainer { 
      height: 200px;
      position: relative;
      
    }

    .buttonCenter {
      white-space: nowrap;
      margin-right: auto;
      margin-top: 260px;
      position: absolute;
      top: 50%;
        left: 50%;
    }

    .buttonMargin {
      margin: 20px!important;
    }
<div class="buttonContainer buttonCenter">

    <a href="mailto:[email protected]">
    <img class="buttonMargin" title="mail" src="button1.png" alt="" /></a>

    <a href="tel:+1234565890">
    <img class="buttonMargin" title="call" src="button2.png" alt="" /></a>

    <a href="facebook.org.dk">
    <img class="buttonMargin" title="facebook" src="button3.png" alt="" width="30" height="30" /></a>

    <a href="instagram.org.dk/" target="_blank">
    <img class="buttonMargin" title="instagram" src="button4.png" alt="" width="30" height="30" /></a>

    <a href="twitter.org.dk" target="_blank">
    <img class="buttonMargin" title="twitter" src="button5.png" alt="" width="30" height="30" /></a></div>

Upvotes: 0

Views: 113

Answers (1)

Jkarttunen
Jkarttunen

Reputation: 7621

Like this?

.buttonCenter {
  margin-top: 260px;
  display: flex;
  justify-content: center;
  align-items: center;

}

img {margin: 1rem;}

Upvotes: 1

Related Questions