CODEWITHSUNDEEP
htmlcsssass
George Welder
George Welder

Reputation: 4045

Center two images, but keep them in separate row?

        <div class="client-logo-wrapper">
          <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
          <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
        </div>

I have these two images in a div. I would like to display underneath another. display:block is good for this. However, I would also like to center them. for this, I would like to use flexbox; but then the two images are put next to another, if there is space. But I don't want this to happen. I want them to be on top of one another, yet, centered like this.

How could i do this?

Upvotes: 0

Views: 36

Answers (3)

Vibhanshu
Vibhanshu

Reputation: 542

It can be achieved using flex-box:

.client-logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.client-logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<div class="client-logo-wrapper">
          <a href="some link"><img class="client-logo" src="http://lorempixel.com/400/200/people/1/" alt="client-logo"></a>
          <a href="some link"><img class="contract-logo" src="http://lorempixel.com/400/200/people/2/" alt="contract-logo"></a>
        </div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53684

The easiest way is to use text-align: center with display: block

a {
  display: block;
  text-align: center;
}
<div class="client-logo-wrapper">
  <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
  <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
</div>

But if you want a flexbox solution, use flex-direction: column; align-items: center;

.client-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div class="client-logo-wrapper">
  <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
  <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
</div>

Upvotes: 1

TVA van Hesteren
TVA van Hesteren

Reputation: 1241

You can use this css-code to achieve what you want:

.client-logo-wrapper {
    width: 100%;
    display: block;
    }
.client-logo-wrapper img {
    margin: 0 auto;
    display: block;
    }

Upvotes: 0

Related Questions