What is causing the input element to not properly align with the image?

Question

What is causing the input element to not properly align with the image?

I am facing a challenge where I want to place two input elements inside an image element. However, after setting the position of the input elements to absolute, only the left input successfully entered inside the image element while the right one remained outside.

I am curious as to why this is happening and I am in need of a solution to ensure that both inputs are placed correctly inside the image.

.container-fluid {
  text-align: center;
  position: relative;
}

img {
  display: inline;
  max-height: 100%;
}

.myB {
  position: absolute;
  top: 50%;
}

<div class='container-fluid'>
  <input class='myB' type='button' value='<'>
  <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
  <input class='myB' type='button' value='>'>
</div>

html css

Answer 1

Answer №1

There are a few issues that need to be addressed:

To prevent layout inconsistencies in older browsers, specify the position of the buttons rather than relying on the browser's default behavior.
Make sure to set the container to inline-block so it doesn't take up the entire width of the page.

.container-fluid {
      position: relative;
      display:inline-block;
      width:auto;
    }
    
    img {
      max-height: 100%;
    }
    
    .myB {
      position: absolute;
      top: 50%;
    }
    .myBRight{
      right:0px;
    }
    .myBLeft{
      left:0px;
    }

<div class='container-fluid'>
      <input class='myB myBLeft' type='button' value='<'>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
      <input class='myB myBRight' type='button' value='>'>
</div> <!-- container-fluid -->

Answer 2

There are a few issues that need to be addressed:

To prevent layout inconsistencies in older browsers, specify the position of the buttons rather than relying on the browser's default behavior.
Make sure to set the container to inline-block so it doesn't take up the entire width of the page.

.container-fluid {
      position: relative;
      display:inline-block;
      width:auto;
    }
    
    img {
      max-height: 100%;
    }
    
    .myB {
      position: absolute;
      top: 50%;
    }
    .myBRight{
      right:0px;
    }
    .myBLeft{
      left:0px;
    }

<div class='container-fluid'>
      <input class='myB myBLeft' type='button' value='<'>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
      <input class='myB myBRight' type='button' value='>'>
</div> <!-- container-fluid -->

Answer 3

Answer №2

If you're looking for help with adjusting the position of a button or input relative to an image, here's a solution. By setting the position of the element to be within the dimensions of the image, you can ensure that it aligns correctly. Although the background of the button may overflow from the image, tweaking the positioning by reducing the pixel value can help place the arrow in the correct spot.

img{
  width:400px;
  height:300px;
}


#next,
#prev{
  position:absolute;
  top:inherit;
}

#next{
  left:400px;
}

  
      <button id="prev" type="input" > < </button>
      <button id="next" type="input" > > </button>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">

Answer 4

If you're looking for help with adjusting the position of a button or input relative to an image, here's a solution. By setting the position of the element to be within the dimensions of the image, you can ensure that it aligns correctly. Although the background of the button may overflow from the image, tweaking the positioning by reducing the pixel value can help place the arrow in the correct spot.

img{
  width:400px;
  height:300px;
}


#next,
#prev{
  position:absolute;
  top:inherit;
}

#next{
  left:400px;
}

  
      <button id="prev" type="input" > < </button>
      <button id="next" type="input" > > </button>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">

What is causing the input element to not properly align with the image?

Answer №1

Answer №2

Similar questions

Utilizing plain HTML, the input type date feature can be customized to restrict the minimum date selection to January 1,

When hovered over, the Dropdown Menu vanishes into thin air

Choose characteristics based on attributes, where the value after the colons is undefined

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

Displaying a div based on the response after it is received using an if/else statement

Restore the initial content of the div element

Activate a pointer cursor when hovering over a TextField in Material-ui design

Drag Bootstrap panels to the edge of the column

The HTML modal validation feature on Spring is malfunctioning as it is vanishing unexpectedly

Troubleshooting: jQuery Drop event is not triggering

Issue encountered while attempting to import three.js in static context

Manipulating CSS animations using JavaScript

SOLVED: How to utilize CSS to confine scrollbars within nested div elements

Is it possible for Google to crawl links that are generated using JavaScript?

Issue with bootstrap accordion not collapsing other open tabs automatically

Instructions for developing an HTML element slider using mouse dragging

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

Which specific scoped CSS selector should I use to modify the width of the mdDialog container?

Is it possible to utilize props within a computed property in order to apply a CSS class binding?