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/
Currently in the process of creating a website using WordPress, specifically with a divi theme and utilizing a windows operating system. It seems that everything appears correctly on desktop, however when resizing the window or viewing the site on a mobile ...
Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...
There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...
It seems like the css is only working on the first column to display the item-meta. Everything appears to be in place when inspected, but for some reason, the opacity does not change back to 1. It's strange because it works fine in the first column ev ...
I'm having an issue with displaying an image and dividing it using bootstrap div columns. The problem is that the image is overlapping the divs, making it impossible to click or attach jQuery events to it. Here is the code I am currently using: #view ...
Can anyone suggest a method for duplicating div text using JavaScript while preserving the style attributes (italics, font family, size, etc.)? My goal is to paste the copied text into Word and have it maintain the same appearance as on the webpage. For e ...
Do all of these elements simply serve the purpose of making the HTML code easier to read? They don't have any additional functions, right? Unfortunately, we could achieve the same result without them. <Div> <p> Example </p> </ ...
Currently, I am facing an issue with extracting first-level <li> elements from a <ul> element. Even though I attempt to retrieve only the first-level <li> elements using Jsoup selector or getElementsByTag, the nested <li> elements w ...
My goal is to design an HTML table layout resembling the following: Left part | Right part | Remove row? ------------------------------------------- 1 [input] [input] Y/N 2 [input] [input] Y/N 3 [input] [inpu ...
Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...
html: <input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> <br><br><br><br> <button id="s">set to visible class</button> <button id="h"> ...
<form class="responses"> <input type="radio" name="option" value="0">False</input> <input type="radio" name="option" value="1">True</input> </form> Just tested: $('[name="option"]').is(':checked ...
Having trouble with a CSS dropdown menu displaying incorrectly in IE, while working fine on other browsers. <body> <div id="container"> <header> <div id="hlogo"> <a href="index.html">title ...
**Greetings, I have created a slot machine using JavaScript, but I am looking to enhance the player's chances based on their credits. Can anyone guide me on how to achieve this? Essentially, I want the player's odds to increase proportionally wit ...
I am currently developing a dynamic game utilizing HTML, CSS, and jQuery. In the lower right corner of the screen, there is a question mark (which is an image file, not text). My objective is to display a help box when the question mark is clicked and held ...
Working on a new webpage and encountered an issue with the HTML markup: <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"> <title>TileTabs</title> <link rel="stylesheet" href="css/style.css" t ...
If I were to submit a form with some text in the value of user_input, let's say "I am free," through AJAX, and it comes back to me as a string. Once it becomes an Object, how could I convert it back into a string format? Thanks, <!DOCTYPE HTML> ...
I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...
Is there a way to save the data about which buttons a user clicked on while visiting our website without using a database? The issue is that any array I use gets reset every time the user is redirected from the page. Note: I'm still learning PHP ...
Check out this live demonstration: http://jsfiddle.net/nnrgu/1/ I then adjusted the background position to 0px -70px and observed the changes here: http://jsfiddle.net/nnrgu/2/ The linear gradient seems to disappear! Am I doing something wrong, or is ...