What is the best way to position img elements at the center of a div and push the div to the bottom of my webpage?

It's a pretty straightforward request. I need the div to be positioned at the bottom of the page, with two images centered inside it.

<div class="social">
        <img src="facebook.png" alt="Facebook"/>
        <img src="instagram.png" alt="Instagram"/>
</div>

I've tried various approaches with no success, as I don't have any applicable CSS. The closest I got was using text-align:center for the <div>, but that didn't achieve the desired effect of positioning it at the bottom of the page.

htmlcsscenter

Answer №1

It seems like this solution should meet your needs, but keep in mind that without the full context of the HTML pages, it's hard to say for sure.

html,
body {
  min-height: 100%;
}
.social {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
<div class="social">
  <img src="http://lorempixel.com/output/people-q-c-30-30-2.jpg" alt="Facebook" />
  <img src="http://lorempixel.com/output/people-q-c-30-30-2.jpg" alt="Instagram" />
</div>

Answer №2

Wishing you find this useful 

<style>
.contact{
    position:sticky;
    bottom:0;
    text-align:center;
    width: 100%;
}
</style>

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

Apply a CSS class upon clicking the button

How can I use jQuery to add a class to my "infoBlock" and style its elements accordingly? I have an infoBlock but need assistance with adding a new class. li { list-style-type: none; } .infoBlock { display: block; width: 520px; height: 280px; back ...

javascriptjqueryhtmlcss

How to retrieve an anchor element from a list using JavaScript

My current code loops through each <li> within a <td> cell and adds a class to the <li>. I have now inserted <a> tags between each <li> and am facing challenges in accessing the <a> tags. What I actually want is to assig ...

javascripthtmliteration

Adjusting the threshold for switching from classic navigation to dropdown navigation to enhance responsiveness

As a novice in responsive design, I am facing a major issue. I need to modify the limit for switching between classic nav and dropdown nav. The current limit is set at 600px, but I require it to be adjusted to 800px. My navigation setup can be viewed her ...

jqueryhtmlcssresponsive-design

Arrange a Matrix of Bootstrap Buttons

I'm struggling to align an array of buttons with varying lengths so that the center of each button lines up with the button below it. I've attempted several solutions, thinking that using justify-content-around would be the solution, but it hasn& ...

csstwitter-bootstrapbootstrap-4

IE7 disregards the margin set in a div after a div that has been positioned absolutely

Within a container, I have two divs - the first one with absolute positioning. Strangely, in IE7, the second div doesn't seem to acknowledge the top margin. Padding works fine, but for visual consistency, I prefer using margin. The culprit appears to ...

htmlcssinternet-explorerinternet-explorer-7

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Currently, I am attempting to display two input boxes in a table when I select specific radio buttons and hide them if I choose another option. The code I have does work but has a minor issue, function disappear() { document.getElementsByClassName("ta ...

javascripthtmljquerycss

Creating a list element after clicking in ReactJS is achieved by using event handlers in

I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended. import { useState } from 'react'; impo ...

htmlcssreactjs

The Bulma dropdown menu fails to display its items

Currently, I am working with Bulma as my CSS framework. While trying to implement the hamburger menu, I encountered some difficulties. The documentation did not provide clear instructions on how the functionality should work. Despite observing the menu tra ...

cssvue.jsvuejs2vue-componentbulma

Check if the input contains lowercase and uppercase letters, numbers, periods, and forward slashes using PREG_MATCH

I am in need of verifying some information and making sure that the sequence exclusively contains a-z, A-Z, 0-9, full-stop, or a forward slash. if(!preg_match("/^[a-zA-Z0-9 ./]*$/",$field)) { $fielderror = "Field can only contain a-z A-Z 0-9 . /"; } N ...

phphtmlscriptingpreg-match

The attempt to update a div element in HTML using an Ajax function was unsuccessful

My attempt to showcase the search results of my webpage below the search area was unsuccessful. I utilized AJAX to present the outcome in a div, but encountered issues. I have three key components: the div, the search result page, and the AJAX function. ...

phphtmlajax

Fetching data dynamically in PHP

I am working on a search form with four filter textboxes. My goal is to submit and search only the textboxes that have values when the user submits the form. I understand how to achieve this using an if-else statement, but it seems too lengthy in terms o ...

phphtml

How can I place a jumbotron on top of a carousel?

How can I overlay the jumbotron component on top of the carousel in order to create a unique website heading? Any suggestions on what I need to implement to make this happen? ...

htmlbootstrap-4

The PHP code fails to execute properly after being uploaded to the server

I am facing an issue with my PHP code not working when uploaded to the server. It works fine on localhost, but why is it not running properly on the server? <?php ob_start(); include 'CUserDB.php'; session_start(); include 'config.php&a ...

phphtmlmysql

Blank YouTube Popup Modal

I am in the process of creating a pop-up modal that contains an embedded YouTube video, but my modal is not displaying properly. I am utilizing Bootstrap and have two separate sections along with JavaScript code. When the modal appears, it remains empty. I ...

javascripthtmlbootstrap-4

Separate each menu item by using the pipe symbol within the list tags

Can you help me style the menu list in CSS by adding a separator | between each element? I attempted using content: "|", but it didn't produce the desired outcome. The current look of the menu is as follows: <ul> <li><a href="..."& ...

htmlcss

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

Seeking a solution for replacing external CSS and JS file links in an HTML document with the actual content of these files. The current structure of the HTML file is as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C ...

javascripthtmlcssawksed

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

javascriptjqueryhtmlcss

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

javascriptjquerycss

html: div broken

The HTML document reads as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"& ...

csshtmlfirebug