I have been trying to center an image both horizontally and vertically, but it seems like my code is not working properly. Here is what I have so far:
#parent {
position: relative;
float: left;
width: 700px;
height: 400px;
overflow: hidden;
background-color: black;
}
#parent img {
max-height: 400px;
max-width: 700px;
}
Keep in mind that the height and width of the image are dynamic.
Here is an example of how to write code in HTML and CSS:
#parent {
position : relative;
float : left;
width : 700px;
height : 400px;
overflow : hidden;
background-color: black;
text-align:center;
line-height:400px;
}
#parent img {
vertical-align:middle;
}
If you want to see this code in action, check out
UPDATE
For an updated version, check out
For optimal alignment of the image, consider adding the following CSS properties to the #parent style:
text-align: center;
line-height: 400px;
#container {
position : relative;
display:table-cell;
vertical-align:middle;
text-align:center;
width : 700px;
height : 400px;
overflow : hidden;
background-color: black;
}
#container img {
max-height :400px;
max-width : 700px;
}
To achieve your desired layout, use the following CSS properties: display:table-cell;, vertical-align:middle;, and text-align:center;.
HTML
<div id="parent">
<img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
</div>
CSS
#parent {
display:table-cell;
width : 700px;
height : 400px;
background-color: black;
vertical-align:middle;
text-align:center;
}
#parent img {
width : 107px;
height : 160px;
}
Check out the demo here:
Utilize the properties display:table-cell, vertical-align:middle, and text-align:center
HTML Code:
<div id="wrapper">
<img src="http://s3.buysellads.com/1241308/100953-1333587587.jpg"></div>
CSS Styling:
#wrapper {
position : relative;
display:table-cell;
vertical-align:middle;
width : 700px;
height : 400px;
overflow : hidden;
background-color: black;
text-align:center;
}
#wrapper img {
max-height :400px;
max-width : 700px;
}
Check out the live demo here:
A syntax error was discovered in the CSS code provided: nax-width : 700px;. The correct syntax should be max-width : 700px;. It is important to use the correct CSS properties for your code to work effectively.
#parent
{
position : relative;
float : left;
display: table-cell;
width : 700px;
height : 400px;
overflow : hidden;
background-color: black;
text-align: center;
vertical-align: middle;
}
#parent img
{
max-height :400px;
max-width : 700px;
}
Here is an example link showcasing the corrected CSS: http://jsfiddle.net/ANwmv/
Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...
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; ...
Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...
I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...
Here is an image that will help illustrate the issue: https://i.stack.imgur.com/VA7fw.png If you want to check out the code sandbox for this problem, you can visit: https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html I am current ...
In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...
My lack of experience with web scraping is definitely showing as I am relatively new to this. The goal of my code is to scrape all the data from a webpage, which it does successfully. However, before the loop continues, I want pandas to write the current p ...
When a request is made to my express application, it returns an empty {}. const express = require('express'); const bcrypt = require('bcrypt'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyPar ...
I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project. However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due ...
Here is the offscreen navigation menu I have set up. When I open a keyboard or dropdown, the offscreen menu changes and exhibits a small gap on the left side after the popup (highlighted in red). It seems like the menu is shifting further away from the ed ...
I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected. .directive('activeLink', ['$location', function (location) { return { restrict: 'A', ...
I am working with the following HTML code snippet: <div id="sectionOne" class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height: 80vh;"> <div class="row d-flex justify-content-center" style="color: #00 ...
Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...
I am working on creating a menu that drops down from the top of the page using JQuery. I have everything set up with the code below: <div id="menu"> <div id="menucontentwrapper"> <div id="menucontent"></div> </di ...
After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...
I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...
I recently dove into the world of LESS and have found it to be quite interesting. However, I encountered a unique situation where a background color was assigned the code #03A9F4 - 100. Based on my limited knowledge of hexadecimal numbers from some IT clas ...
As a beginner in javascript, I am working with a JSON file that contains an array of objects. Each object includes two properties: a borough and mappings. Mappings have two sub-properties called macro and neighborhoods. The macro represents a larger neighb ...
I am interested in implementing a bootstrap notification menu similar to the one found at this link: http://www.bootply.com/oasBuRC8Kz# However, I would like to add the number of notifications to the upper right corner of the glyphicon. I have gone throug ...
I'm currently working on familiarizing myself with the styling example for Datatables.net using Bootstrap 5, which can be found at https://datatables.net/examples/styling/bootstrap5.html. I've followed the code provided in the example closely, bu ...