Inline images alignment/spacing in HTML/CSS

Question

I have the following HTML/CSS code which results in two images Logo.jpeg and Banner1.jpg to be on the same line, one after the other. I would like to put space between the two, resulting Banner1.jpg to be centered, while Logo.jpeg should stay aligned to the left. Tried several solutions like margin-left/margin-right, padding, align and others with no avail.

HTML

.logo h1 {
  font-size: 40px;
  margin: 20px 0;font-weight: 400;
  display: inline-block;

}
.logo h2 {
  font-size: 40px;
  margin: 20px 0;font-weight: 400;
  display: inline-block;
}

<div class="site-branding-area">
  <div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="logo">
                <h1><a href="./"><img src="img/Logo.jpeg" height="725" width="200"></a></h1>
                <h2><a href="XXX"><img src="img/Banner1.jpg" height="150" width="350"></a></h1>
            </div>
        </div>

Can anyone help me understand how to fix it so to have Logo.jpeg align to the left and Banner1.jpg centered? Thanks, take the chance to wish you a good day, Michele

Tanner Dolby · Accepted Answer · 2021-03-30T05:59:13.490

You could make the .logo container a CSS Flexbox so both the images are aligned in a row. Then use justify-content to define how the browser should distribute space between the flex items along the main-axis (ie x-direction). Next, you can center the second image by selecting the .logo h2 container which holds the nested <img> and applying auto left and right margins to evenly center it on the page.

Now the sidebar image is aligned to the left of the viewport and the banner image is centered. Try this out.

.logo h1 {
  font-size: 40px;
  margin: 20px 0;font-weight: 400;
  display: inline-block;

}
.logo h2 {
  font-size: 40px;
  margin: 20px auto;
  font-weight: 400;
  display: inline-block;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

<div class="site-branding-area">
  <div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="logo">
                <h1><a href="./"><img src="https://horizon-media.s3-eu-west-1.amazonaws.com/s3fs-public/field/image/whale-wave.jpg" height="725" width="200"></a></h1>
                <h2><a href="XXX"><img src="https://images.squarespace-cdn.com/content/v1/52e1b262e4b06ef060506756/1568644386677-SJGPE3UI0QRLVFE2GK8G/ke17ZwdGBToddI8pDm48kGwqNa-TSATgABi909OK27Z7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQSxQa_pE67Ig1CszvlZo11NCLvqIlshiNC_JCcjnOmqOV4zqrbdg_2AqIEjj1Z3Fg/Hero.jpg?format=1500w" height="150" width="350"></a></h1>
            </div>
        </div>

@MicheleGiglioni Let me know if this helps solve your problem. — Tanner Dolby, Mar 30 '21 at 05:50
how to fix it so to have Logo.jpeg align to the `left` and Banner1.jpg `centered`? — DecPK, Mar 30 '21 at 06:12
This add space between the images, but it won't align the second image `centered` as the OP want — DecPK, Mar 30 '21 at 06:13
@DeC Can you elaborate more? The left `Logo.jpeg` image is aligned to the left of the viewport and the `Banner1.jpg` is vertically and horizontally aligned on the page (centered). Feel free to run the code snippet above and take a look at the "full page" view. The OP also specifically says, " I would like to put space between the two". — Tanner Dolby, Mar 30 '21 at 06:26

score 0 · Answer 2 · answered Mar 30 '21 at 05:45

0

you may add this css with your css and test

.logo {
display: flex;
justify-content: space-around;
}

answered Mar 30 '21 at 05:45

Marynathan Judson

130
5

how to fix it so to have Logo.jpeg align to the `left` and Banner1.jpg `centered`? – DecPK Mar 30 '21 at 06:12

Inline images alignment/spacing in HTML/CSS

2 Answers2