Placing an image centrally between the header and footer using CSS

Question

Placing an image centrally between the header and footer using CSS

My goal is to create a straightforward landing page that includes a header, footer, and an image perfectly centered between the two (both horizontally and vertically).

The space above and below the image should be equal and adjust based on the height of the browser window.

The image will have a set width (900px) and height (600px).

Note: The footer will be sticky.

I attempted the following CSS:

{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}

This is how I structured my HTML:

<div class="fbg">
    <div class="fbg_resize">
        <img src="images/image.png" width="900" alt="" />
    </div>
</div>

To center the image horizontally, I used this CSS:

.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}

Here is the important code snippet:

http://jsfiddle.net/SFWBL/

html css image center

Answer 1

Answer №1

Take a look at this JSFiddle to see the basic concept, it should help you kickstart your project.

Here is the HTML code:

<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>

And here is the CSS code:

html, body{
    text-align:center;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#header, #footer{
    height:50px;    
    width:100%;
}
#image{
    height:50px;
    width:50px;
    margin:-25px auto 0 -25px;
    background:grey;
    position:absolute;
    top:50%;
    left:50%;
}
#header{
    background:blue;
}
#footer{
    position:absolute;
    bottom:0px;
    background:red;
}

Answer 2

Take a look at this JSFiddle to see the basic concept, it should help you kickstart your project.

Here is the HTML code:

<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>

And here is the CSS code:

html, body{
    text-align:center;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#header, #footer{
    height:50px;    
    width:100%;
}
#image{
    height:50px;
    width:50px;
    margin:-25px auto 0 -25px;
    background:grey;
    position:absolute;
    top:50%;
    left:50%;
}
#header{
    background:blue;
}
#footer{
    position:absolute;
    bottom:0px;
    background:red;
}

Answer 3

Answer №2

Instead of relying on an img tag, consider utilizing the background-image property for the styling of the div element.

html, body {
    height: 100%;
}

.fbg {
    background-image: url(http://lorempixel.com/900/600);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

To view the updated version, visit this JSFiddle link.

Answer 4

Instead of relying on an img tag, consider utilizing the background-image property for the styling of the div element.

html, body {
    height: 100%;
}

.fbg {
    background-image: url(http://lorempixel.com/900/600);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

To view the updated version, visit this JSFiddle link.

Answer 5

Answer №3

Relative positioning allows your elements to adapt to the size of the browser window using percentages. By adjusting the top and left edges, you can utilize negative margins to reposition items accordingly. For example, if your image has a fixed height of 600px, you would use -300px to move it up by half its height. This style could look like:

position: absolute;
top: 50%;
margin-top: -300px;

Answer 6

Relative positioning allows your elements to adapt to the size of the browser window using percentages. By adjusting the top and left edges, you can utilize negative margins to reposition items accordingly. For example, if your image has a fixed height of 600px, you would use -300px to move it up by half its height. This style could look like:

position: absolute;
top: 50%;
margin-top: -300px;

Placing an image centrally between the header and footer using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Does the <cite> tag go inside a link in HTML?

Compatible with pure vanilla JavaScript, but not jQuery

CSS: What could be causing the element on the right to not be selected?

Having difficulty retrieving/binding the correct Entity Id in JQuery, consistently retrieves the first item Id from the iteration

How can you ensure your CSS code is functional across various browsers?

How can you modify an existing animation style upon hovering?

Eliminate the dark backdrop from html5 videos that only shows up for a brief moment

Injecting SVG styling into HTML using the content tag and CSS

When the checkbox is unchecked

Issues with Django and Bootstrap Dropdown Lists Functionality

Incorporating Button Value from Anchor Tag Title Upon Page Load

Display PHP output within a styled CSS box

jQuery's promise method in CSS is executed successfully

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

Loading items into the select menu

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

Struggling to align materialUI input or textfield horizontally

The foundation grid system is experiencing difficulties when implemented on an Angular form

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

What is the most dependable method for extracting text from div elements in a list using Selenium and Python, leveraging sibling relationships?