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

Is it possible to display one division on top of another with a transparent opacity effect in HTML?

I'm struggling with designing web pages and currently working on a page on codepen.io using code from this link. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...

javascriptjqueryhtmlcssresponsive-design

Intermittent Z-index conflicts in need of a solution - seeking guidance

Is there a way to make the h1 heading and img image elements appear on top of the opaque div they are enclosed in? I want them to look unaffected by the transparency of their parent div. Here is a Fiddle demonstrating my issue: <div id="main"> ...

htmlcsslayout

Is it possible to use PHP to add a prefix to every selector in a snippet of CSS code?

Suppose I have a variable named $css that holds some CSS code. My goal is to prepend a specific text to each selector. For instance, consider the following CSS code: #hello, .class{width:1px;height:1px;background-color:#AAA;} div{font-size:1px} input, a, ...

phpcssparsing

Aligning columns next to one another using flexbox in a centered manner

I am attempting to create a layout with 3 columns, but I want any extra columns beyond a multiple of 3 to be centered instead of aligned left. While I have made progress, the issue I'm facing is that the additional columns are not centered relative t ...

htmlcssflexbox

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

htmlcsstext

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

javascriptjqueryhtmltwitter-bootstrapcss

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

I am currently developing a calendar application. While I have managed to successfully display the calendar and add events, I am facing an issue with displaying events on the monthly view. Here is a snippet of the HTML code being used: <head> &l ...

phphtmlsqljson

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

var count = 2; $('.next').click(function() { var requiredField = true; $(this).siblings('table').find('tbody tr:nth-child(' + count + ') td').each(function() { var element = $(this).find('center').f ...

javascriptjqueryhtml

Utilize PHP to include attachments and information within an email form

This is my PHP code In the HTML form below, I aim to retrieve data from the name, email, phone number fields, and file attachment. When attempting to get the attached file (without any other information entered) in a live server environment, I'm exp ...

phphtmlemailphpmailer

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

javascriptjqueryhtmlcss

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

javascriptphphtmlcss

CSS disappears after selecting menu in JSF application with PrimeFaces

Whenever I click on a p:menuitem and update the content of a layoutunit, the CSS style of the layoutunit disappears. Strangely, when I refresh the page, the style magically reappears. Can anyone explain why this happens? <p:layout id="plantillaPrincipa ...

javacssjsflayoutprimefaces

Mistake in the hovering positioning within the WordPress theme

I've encountered a hover issue on my website that I'm trying to resolve. Every time I hover over a product, the product description appears underneath it instead of on top, and I can't seem to find a solution: The site is using the sentient ...

csswordpress

A single column in Bootstrap displaying text vertically

Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...

htmlcsstwitter-bootstrap

Adding hyperlinks that do not redirect

I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...

javascriptjqueryhtmllaravel-blade

"Yakov's slender typefaces are appearing incorrectly on the screen

I recently tried to incorporate Yakov thin fonts using CSS @font-face, but I noticed that the fonts appear quite different from the original ones. Any idea why this might be happening? Below is the code snippet I used: @font-face { font-family:' ...

htmlcssfont-faceembedded-fonts

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

javascripthtmljquerycssjquery-animate

Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...

javascripthtmlcsscodeigniter

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs