Align two images to the center while displaying them in individual rows

        <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 a div with two images that I want to stack underneath each other and center using flexbox. However, when applying display:block, the images are placed next to each other if there is enough space. I prefer them to be centered on top of one another even with available space.

Is there a way to achieve this layout?

htmlcsssass

Answer №1

To center the content, you can easily use text-align: center along 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>

If you prefer a flexbox approach, you can 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>

Answer №2

If you're looking to achieve your desired outcome, this css-code may be helpful:

.partner-logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    }
.partner-logo-container img {
    margin: 0 auto;
    display: block;
    }

Answer №3

To accomplish this layout, you can utilize 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for combining AngularJS filters?

I currently have a fragment object like this: [{id: 721, titulo: "Cotizador Gastos Médicos Bx+ 2019", descripcion: "Cotizador Gastos Médicos Bx+ Tarifas 2019", updateDate: "2020-03-25 14:30:22.0", idCategoria: "1", …}, {id: 88, titulo: "Cotizador GMM ...

javascripthtmlangularjs

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

javascripthtmljqueryajaxforms

Conceal a div once the user scrolls to a certain position using vanilla JavaScript

As a beginner in the field of web development, I am currently working on creating a blog website. Code Function - One of the challenges I'm facing is implementing a floating pagination bar that needs to be hidden when a visitor scrolls near the foote ...

javascripthtmlcssbootstrap-4

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...

htmlcss

Ensuring Consistent HTML5 Page Layout Across Various Browsers Using CSS

Hey everyone, I recently created an HTML5 page and utilized the <section> tag. However, I'm encountering issues with the CSS file I'm using. It seems to work perfectly on Firefox, but the layout is all over the place when viewed on Chrome a ...

csshtml

Incapable of stacking one canvas on top of another

I'm new to javascript and looking for help with positioning a canvas element behind another. The code I have may be a bit messy, so any assistance is greatly appreciated. My goal is to have the canvas named "myCanvas" appear behind "coinAnimation". Th ...

javascripthtmlcsscanvas

The Bootstrap 5 Accordion Content is not Showing Up

In my current project in vscode, I am using Bootstrap 5 to develop a website. Specifically, I am working on creating an accordion feature with Bootstrap 5. However, I encountered an issue where the accordion body does not show up when clicking on the acc ...

htmlcssvisual-studiofrontendbootstrap-5

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

javascripthtmljquerykendo-uikendo-grid

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

javascriptphpjqueryhtmlajax

Unraveling the Enigma of CSS Grid Whitespace

I'm facing an issue while trying to construct a grid of images using CSS Grid. Interestingly, I am encountering mysterious white space around the first two items in the grid. Upon inspecting the images, I am unable to identify any source of this white ...

htmlcssgoogle-chromecss-grid

Is Next.js compatible with CSS caching?

I'm currently working on a project with Next.js (version 12.1.0) and SCSS modules. I've noticed that my CSS seems to be caching extremely aggressively, requiring me to restart the server (npm run next dev) in order to clear it. Has anyone else en ...

javascriptcsssassnext.js

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

javascriptjqueryhtmlcss

Toggle display of divID using Javascript - Conceal when new heading is unveiled

At the moment, I have implemented a feature where clicking on a title reveals its corresponding information. If another title is clicked, it opens either above or below the previously opened title. And if a title is clicked again, it becomes hidden. But ...

javascripthtml

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

javascripthtmldom

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...

htmlcssbootstrap-4

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

jqueryhtmlcsstwitter-bootstrap

Customized CSS scrollbar within a specific div

Is it possible to apply CSS to customize the scroll bar of a specific div without affecting the entire page layout? ...

csshtmlscrollbar

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

htmlcssreactjs