Having difficulty aligning images horizontally in print preview

Currently, I have two images displayed in the browser horizontally aligned. My goal is to print them using JavaScript, but when I preview it, the second image appears under the first image as if on a new line. I need these pictures to be printed horizontally aligned. I attempted to adjust the padding-top to align them, but unfortunately, it did not work.

<img id = "telin_logo" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77">
<img id = "telin_logo2" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77px;">

When I mentioned 'print,' I meant printing using a printer. I used @media print to adjust the layout. Apologies for omitting this information.

Answer №1

My approach revolves around utilizing pure CSS for the solution. Take a look at the code snippet below, and hopefully, it will provide some insight.

.container{
    width:100%;
    border:1px solid #222;
    position:relative;
    height:100%;
}
body,html{
    height:100%;
    width:100%;
}
.left{
    width:50%;
    float:left
}
.right{
    width:50%;
    float:left;
}
<div class="container">
<div class="left">
<p style="text-align:center"><img src="red.png"/></p>
</div>
<div class="right">
<p style="text-align:center"><img src="red.png"/></p>
</div>
</div>

Answer №2

Additionally, you have the option to utilize the following attributes.

div {
  width: 100%;
  height: 50px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  text-align: left;
  margin: 0 auto;
}

img {
  align-self: center;
  margin: 0 auto;
}
<div>
  <img src="http://placehold.it/200x100/888888&text=example_logo">
  <img src="http://placehold.it/200x100/888888&text=example_logo2">
</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

Unable to trigger onclick event for creating a new title

I'm currently working on a text generator project using JavaScript. My goal is to create a function that saves the selected text from a dropdown menu and displays it as the page title when the "Generate" button is clicked. The issue I'm facing i ...

Ways to avoid a function from being repeatedly executed in an addEventListener

I am looking to initiate an animation when the user hovers their cursor over an HTML element that contains multiple nested elements. Consider the code snippet below: <div ref={exampleReference}> <img src='...' /> <div> & ...

How can I incorporate variables within a style tag in an Angular template?

I'm currently working on an Angular 5 application and I need to be able to apply dynamic CSS within the style tag in the template. I've tried a few solutions but so far, none have worked. app.component.ts customCss : any; constructor(){} ngOn ...

Highlight the menu when the user is actively browsing this section

I have successfully implemented a fixed and sticky menu with a progress bar that resembles an underline. However, I am facing an issue with positioning the progress bar correctly under each menu section. For example, when a user hovers over the first secti ...

What is the process for composing an email that includes PHP code?

I am trying to send an email using PHP, I want the email to include PHP code but for some reason it is not working. How can I successfully add PHP content in the sent email? Here is the code that generates the email ...

css("Right", posVar); is not functioning properly

The main goal here is to achieve an instant "jump" to the right without any flashing effects. Instead of using .animate(), which can cause a flickering effect, I believe that .css() will provide the desired instantaneous movement to the right. However, fo ...

Does the margin fall within the element's boundaries?

Consider this code: <html> <head> <title>Understanding CSS Box Model</title> </head> <body> <section> <h1>An example of h1 inside a section</h1> </section> </body> </html& ...

Angular application experiencing issues with Bootstrap modal functionality

I'm attempting to utilize a Bootstrap modal within an Angular application by using classes in HTML, but it doesn't seem to be working - the modal is not displaying <div class="modal text-center" *ngIf="showmodal" tabindex=& ...

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

Issue with PHP Header Include causing navigation bar not to appear on the page

One important point to clarify: as someone who hasn't had experience with PHP, I was struggling to understand how to format the PHP file in order to display the header (nav bar) when included in the index file. Many online resources failed to explain ...

Sleek CSS 'shrink' animation on dimensions, spacing, and outlines

I am currently working on developing a transition that can effectively 'collapse' a div along with its floating elements by adjusting the width, padding, and border properties. After conducting some research, I have compiled my findings in the f ...

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

Unable to enclose an element with an HTML structure

I am attempting to take all the elements marked with the table tag and envelop them in an HTML structure to make the tables responsive. However, it appears that my current approach is not yielding the desired results. Can you please provide some insight ...

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

React-select is failing to align properly with flexbox styling

I'm currently working on customizing my navbar to display both react-selects in a single row. I initially had everything running smoothly with the traditional vanilla select, but integrating the react-select caused my styling to break. Navbar.js impo ...

Using bracket notation with aframe is not supported

When using A-Frame, I have encountered an issue with accessing a component named with a dash, such as "orbit-controls". My goal is to access the A-Frame component "orbit-controls". You can find the link below: aframe-orbit-controls component As the minA ...

Ways to troubleshoot React JSX/HTML input issue displaying as -$NaN.undefined

https://i.sstatic.net/1xIvb.pnghttps://i.sstatic.net/aeQrS.pngI'm currently facing an issue while trying to implement an input field that subtracts a number from another computed value within an HTML table setup. I've noticed that everything work ...

Image Animation Using a Rotational Control (HTML/JavaScript/...)

I am interested in achieving a specific effect with a series of images that transition from dark to light. My idea is to have a dial or slider underneath or over the frame so that when it is moved to the left, the black image is displayed, and when moved t ...

The Visualforce page is not displaying page breaks correctly for cells with rowspan in the table

Having encountered a similar issue to this question: table rowspan page break On my Visualforce page, I have an HTML table with a custom rowspan in one column (varies based on the number of spanned rows) and I'm experiencing a styling problem (see is ...

Swirling hues transforming into #000000 upon second attempt

My goal is to create a button that generates two random color codes. Initially, this button seems to work fine on the first click, but on the second click, both codes turn into #000000. Despite my attempts to troubleshoot the issue, I haven't been ab ...