Resizing images and displaying side by side with justification-CodePudding

This question was

However, if I don't resize the image, the spaces are somewhat even but the image is too big, as below:

My code is as below


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            background-color: powderblue;
        }
        @media print {
            @page {
                size: landscape;
            }
        }/*required because this page will always have to be printed in landscape */
        .Row{
            display: flex;
        }
        .Cell{
            align-items: center;
        }
        .Cell h1{
            align-items: center;
            text-align: center;
        }
        .Cell h2{
            text-align: center;
        }
        .Cell .logo{
            width: 30%;
            height: auto;
        }    
    </style>
</head>
<body>
    <div >
        <div >
            <img src="logo1.jpg" alt="logo1" >
        </div>
        <div >
            <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
            <h2>THIS IS A SUBHEADING</h2>
            <br>
            <h2>ANOTHER SUB HEADING</h2>
        </div>
        <div >
            <img src="logo2.jpg" alt="logo2" >
        </div>
    </div>    
</body>
</html>

If anyone could point out to me how to make the logo equidistant from the headings, it would be much appreciated.

CodePudding user response：

I have reconstructed your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
                    
            background-color: powderblue;
        }
        @media print {
            @page {
                size: landscape;
            }
        }/*required because this page will always have to be printed in landscape */
        .Row{
            display: flex;
                        flex-direction: row;
                        /* align-items: center; */
                        justify-content: center
        }
        .Cell{
                        /* justify-content: center */
                        align-items: center;
            text-align:center;

        }
        .Cell .logo{
            width: 30%;
            height: auto;
        }    
    </style>
</head>
<body>
    <div >
        <div >
          <img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" >
        </div>
        <div >
            <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
            <h2>THIS IS A SUBHEADING</h2>
            <br>
            <h2>ANOTHER SUB HEADING</h2>
        </div>
        <div >
           <img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" >
        </div>
    </div>    
</body>
</html>

This below link will guide you much better way: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

Setting the width of <img> elements to percentage value is a little confusing because their containers don't have a specified width, so it isn't clear what the width should be.

I assume you wanted the first and last .Cell to be 30% wide, but logos smaller and pushed to the opposite ends of the page. I set the width of the logos to be 100px, but you can tweak that as you like. The key part is pushing the logo in the last .Cell to the right, one way to do it using Flexbox:

.Cell:last-child {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

The align-items declaration is there so that the logo doesn't stretch to take up the height of the container.

I also removed some of the the align-items declarations from your code that weren't doing anything because they weren't Flex containers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body { 
            background-color: powderblue;
        }
        @media print {
            @page {
                size: landscape;
            }
        }
        .Row {
            display: flex;
            justify-content: center
        }

        .Cell h1{
            text-align: center;
        }
        .Cell h2{
            text-align: center;
        }

        .Cell:first-child,
        .Cell:last-child {
            width: 30%;
        }

        .Cell:last-child {
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
        }

        .Cell img {
            width: 100px;
            height: auto;
        }
    </style>
</head>
<body>
    <div >
        <div >
          <img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" >
        </div>
        <div >
            <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
            <h2>THIS IS A SUBHEADING</h2>
            <br>
            <h2>ANOTHER SUB HEADING</h2>
        </div>
        <div >
           <img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" >
        </div>
    </div>    
</body>
</html>