Align an image in the middle of the page

I have created a website showcasing images in a gallery. Currently, the images are aligned to the top and I would like them to be centered within the DIV.

Below is the code I am using:

.carousel .item {
  height: 900px;
  background-color: #777;
}
.carousel-inner > .item > img {
    top:5%;
    display: block;
    margin-left: auto;
    margin-right: auto  
}

You can view my website in action by visiting this link:

The last image on the page is a prime example of what I am trying to achieve. It is a small image that I want vertically centered.

cssimagecss-positioncentervertical-alignment

Answer №1

Give this CSS a shot

.slider .element {
        position:relative;
        height: 900px;
        background-color: #777;
}
.slider-container > .element > img {
        display: block;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
 }

Also, check out this helpful resource on Absolute Horizontal And Vertical Centering In CSS

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

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image

A different approach to achieve the same design using CSS

Looking to create a layout where each row displays identical images with unique content in HTML/CSS. I have successfully used tables in HTML and CSS to accomplish this task, but I am curious if there are better practices for creating such a design. The go ...

htmlcsshtml-table

Arranging sibling buttons to wrap seamlessly like text

Is there a way to turn every syllable of a specific phrase into clickable buttons while maintaining regular text wrapping behavior? For reference, in the first image each syllable is plain text, in the second they're wrapped in <span>, and in t ...

htmlcss

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

How can I ensure that the image fits perfectly within the box using HTML and CSS

I'm having trouble displaying an image perfectly within my div. The image doesn't cover the entire box. Here is my code: .card-background{ background-image: url("../../../assets/imgs/back-blank.png"); border-radius: 10px; margin-top: 2%; ...

htmlcss

Dropdown search menus are failing to appear in the correct location

I have 4 dependent search dropdown menus side by side. There are two issues I am facing: Whenever I type in any of the drop-down menus, the MySQL-connected lists appear but not directly beneath the actual 'input-type-search-box'. Additional ...

phpjavascripthtmlcssajax

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with Displaying Full-Page Div

My HTML page consists of just one div. The body code is as follows: <div> </div> Here is the corresponding CSS: body { margin:0; height:100vh; width:100vh; } div { height:100vh; width:100vh; color:#000000; } I c ...

csshtml

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...

javascripthtmlcssimage

Eliminate uniform column heights in Bootstrap 4 rows

Exploring the latest version of Bootstrap, I am experimenting with the updated grid system to create two columns. Here's the code snippet in this JSFiddle: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" r ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best method to reset the default styling of input[type="text"]:focus in Chrome and Safari?

Recently, I implemented a search feature on this codepen and everything appeared to be working fine in Firefox. The state currently showing is :focus, with the input[type="reset"] displaying a background image. HTML <input type="reset" value=""> ...

htmlcssgoogle-chromesafari

Is it possible to create a CSS-only solution that can adapt variable content to a vertical grid without using JavaScript?

I am currently facing a minor issue with a website I am working on that, while not a major problem, would be great to resolve. The site, including all promotional materials for the event it represents, has been designed based on a precise square grid. Ever ...

javascripthtmlcss

What is the best way to combine multiple classes when declaring them in CSS?

I'm attempting to combine the following code snippets (possibly misunderstood the term) - is there a way to have them both perform the same function without creating another class with identical attributes? .games span { display: inline-block; ...

cssclassconcatenationhtml

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu

WP Highlighted Image

I'm facing a small issue where the featured image on my posts is not displaying in the desired size. I want the featured image to match the total width of the post, but it keeps showing up in its original size. I'm clueless about how to fix this ...

phphtmlcsswordpress

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

csstwitter-bootstrapangular

Steps for rearranging the Bootstrap carousel

I am looking to rearrange the carousal indicators so that they show up below the caption. You can view a demonstration of the carousel in action by visiting the following fiddle: <pre> https://jsfiddle.net/w1jjeh7L/ </pre> My goal is to a ...

jqueryhtmlcsstwitter-bootstrap-3

Is there a method to ensure that Text First and Image First layouts are consistently displayed in a uniform manner?

When creating a Shopify theme for a client, I encountered an issue with the layout of my liquid file. Specifically, when using the text-first layout, the image in the image-with-text div is partially hidden due to the content that follows it causing the he ...

htmlcssshopifyliquid

Is it possible to achieve a FadeIn effect without using the .hide()

Is there a way to achieve a fadeIn effect without interfering with margins when the object is hidden from the document? I would like it to animate from opacity 0, but I am struggling to make it work. Any suggestions or ideas would be greatly appreciated. ...

jquerycssanimationfadeinanimate.css

Displaying border upon tapping the icon in a mobile browser

I am facing an issue with an icon that has interactive functionality. When I click on it, a visibility class toggles. However, when I try to interact with it on my phone, a blue marker appears on top of the icon during the process which does not look very ...

androidhtmlcss