How to center an image within a div without it moving

I have set up a JSFiddle for reference: http://jsfiddle.net/AsHW6/

My task involves centering the down_arrow.png images within their respective div containers. I have successfully centered the up_arrow.png images using auto margins. These images are positioned at the bottom of the divs using the fixed property, ensuring they remain at the bottom regardless of screen resolution.

Can anyone advise on the best method to center a bottom-fixed image within the width of its container div?

Here is some code snippet from the provided JSFiddle (I am experiencing difficulty with StackOverflow formatting): 

    .scroll-arrow-down {
        position: fixed;
        bottom:0;
    }

Note that I do not require any IE-specific hacks or workarounds, as this application will not support IE. Your feedback and suggestions are welcomed.

csshtmlcss-positionalignment

Answer №1

To avoid having the images fixed to the viewport, it is recommended to use absolute positioning instead of fixed position. This way, the images will be positioned in reference to the container that holds them.

Adding a left:45%; rule can help center the images, but you may need to adjust this based on the width of your arrows.

.scroll-arrow-down {
    position: absolute;
    bottom:0;
    left: 45%;
}

Check out this example on JSFiddle for more details

Answer №2

To create a visually appealing design, you can surround the arrow-down images with a div that is positioned at the bottom of the container. This allows for easy centering of the content within the div.

Here's an example in HTML:

<div id="list2">
  <img src="image/up_arrow.png" class="scroll-arrow-up">
  <p class="list-title" id="list-title2">Interactive Features</p>
  <div class="scroll-arrow-down">
    <img src="image/down_arrow.png">
  </div>
</div>

And the corresponding CSS:

.scroll-arrow-down {
  position: absolute;
  bottom: 0;
  background-color: blue;
  width: 100%;
  text-align: center;
}

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

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Is there a way to apply a highlight with a style of "background-color: aqua" in the textarea only to the word selected from the list above after clicking on it? See below for my HTML: <head> <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascriptjquerycss

maintain visibility of website menu while scrolling

I am having trouble getting my drop-down menu to stay fixed at the top of the screen while scrolling down on my website. Despite several attempts, I have not been able to achieve this using the current CSS and menu setup. Can someone please assist me wit ...

javascriptjqueryhtmlcssstatic

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Tips for navigating a user to a different HTML page using JSP code?

In my html page Login.html, I have set up a simple login form with username and password fields, along with a submit button. When the user clicks on the submit button, it triggers a JSP page named Login.jsp to validate the entered credentials against an ...

javahtmljsp

Vue Template ref Error: Unable to access scrollHeight property of null object

I'm currently working on creating a responsive sidebar in Vue, and I encountered an issue after refactoring my project to remove the state.js file. The problem is related to the dropdown/collapse elements, and it's throwing a TypeError: Cannot re ...

javascriptcssvue.jstypeerror

Explore a variety of themes for the antd design token

Is there a way to access the text color of both the default and dark themes using design tokens? I am looking for a method to seamlessly switch between the two color schemes based on specific conditions, without having to change the entire theme. For ins ...

cssreactjsreact-hooksthemesantd

Arrange two <p> elements in a horizontal alignment

How can I align two <p> elements on the same line? I am trying to align both <p> elements on the same line, one to the left and the other to the right. <p style="text-align:left">Copyright &copy; {$date_year} {$companyname}. All R ...

html

Stylish Titles with Bootstrap

I have been trying to eliminate the border that is creating the panels Body, but I am encountering some difficulties in locating it. Here is the code snippet for my panel: <div class="panel"> <div class="panel-heading"> <span class ...

htmlcsstwitter-bootstrap

Transform HTML into PNG with Canvas2image, followed by the conversion of PNG into BMP

Is there a direct way to convert HTML to BMP? After searching online, it seems that there isn't a straightforward method. So, I decided to convert HTML to PNG using canvas JS and then use PHP to convert the file from PNG to BMP. I have a question abou ...

javascriptphphtmlcanvas

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Using PHPMailer in conjunction with a textarea form and HTML

Currently, I am attempting to piece together code from a PHP tutorial that demonstrates how to create a basic PHPMailer form for sending plain text emails to a mailing list. The simplicity of the form is ideal as it will be used by only a few individuals. ...

phphtmlformsemailphpmailer

Troubleshooting a Dynamic Navigation Bar Problem with jQuery Integration

Having developed a responsive navbar, an issue arises during iPad breakpoints where attempting to close the active navbar by clicking the hamburger icon triggers the jQuery script to also perform .removeClass(".active").slideToggle() on two buttons, causin ...

htmljquerycssresponsive-nav

Fixing CreateJS in Adobe Animate HTML5 Advertisement for Internet Explorer versions 9 and 10

As I work on creating an HTML5 ad using Adobe Animate CC, I encounter a minor setback. While testing the ad, I notice that it displays perfectly in most browsers except for Internet Explorer versions 9 and 10. It's interesting to see that according ...

htmlinternet-explorer-9createjsanimate-cc

How to automatically switch to the next tab in Bootstrap using JQuery when the video finishes

I recently developed a tabbing system featuring 4 tabs using Bootstrap. While it currently functions manually, I am seeking a way to have it loop automatically upon video completion. Below is my current code: <div id="tab"> <ul class="nav nav ...

jqueryhtmltwitter-bootstrapjquery-selectors

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

javascriptphphtmlajaxlaravel

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

csscss-transitionscss-transforms

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

javascriptjqueryhtmlcssimage

Why does the container overflow when the child is floated in CSS?

Can you explain why a parent div element stops adjusting its height when its child is floated? Here is the HTML snippet: <!DOCTYPE html> <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="in ...

htmlcssuser-interface

Create a dynamic effect by adding space between two texts on the page

const Button = () => { const options = ['test1', 'test2', 'test3']; return ( <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row' ...

javascriptcssreactjsarrays

Tips on assigning html actions/variables to a flask submit button

I am facing an issue with my Flask app where the form submission process takes a while for the backend to process. In order to prevent users from refreshing or resubmitting, I want to display a loading gif during this time. The current HTML code for my fl ...

javascriptpythonhtmlflask