Is there a way to center-align an item both vertically and horizontally with auto-generated width and height in CSS without relying on traditional methods like using top: 50%, left: 50%, transform: translate(-50%,-50%)?
CSS configuration without alignment properties
#container {
width: 200px;
height: 100px;
background-color: lightblue;
}
#myImage {
width: auto;
height: auto;
max-height: 100px;
max-width: 200px;
}
It's a bit unclear what your goal is, but here's an image without specific height or width set in the CSS. Based on your question, it seems you want it centered so that even if the image size changes, it remains centered both horizontally and vertically.
The only issue you might encounter is with older browsers that do not support flex. In that case, you can use display: table; and display: table-cell; as alternatives.
Here is a sample link for reference
CSS:
#container {
width: 250px;
max-height: 250px;
height: 250px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
#myImage {
//removed
}
Here is an example of how you can achieve the desired effect:
#helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#container {
width: 150px;
height: 75px;
background-color: lightgreen;
text-align:center;
}
#myPic {
width: auto;
height: auto;
max-height: 75px;
max-width: 150px;
vertical-align: middle;
}
<div id="container">
<div id="helper"></div>
<img id="myPic" src="http://example.com/image.jpg" />
</div>
Using Flexbox in this scenario should work well, depending on the level of browser support needed.
There is no requirement to manually position the image, as the flex properties will handle that automatically.
.container {
width: 200px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.large {
width: 300px;
height: 200px;
}
.myImage {
width: auto;
height: auto;
}<div class='container'>
<img class='myImage' src='http://s3.amazonaws.com/hirethings/photo/7250/images/thumbnail.jpg?1274508483' />
</div>
<div class='container large'>
<img class='myImage' src='http://lorempixel.com/image_output/food-q-c-250-160-5.jpg' />
</div>All user entries are captured and stored in an array. The array output should be displayed in a dynamic table which includes edit and delete options. If the number of entries exceeds 3, then the table should also have previous and next navigation options. ...
I'm experimenting with responsive design and trying to adjust elements based on screen resolution. For example, I have the following code snippet: @mediaquery only screen and (min-width:1125px) and (max-width:1280px) { flex-basis: 31.4rem; ...
Encountering an issue with plot output in Shiny. When using standard ggplots, the output is correct without any extra white margins. However, when utilizing the "ggmap" package (which also produces ggplot-type outputs), white margins suddenly appear. (Ple ...
I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...
I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions. For the next button, I want the background image to appear to the right of the text. As for the previous bu ...
Here is a different layout to consider: <div style="float: left"> content1 </div> <div style="float: left"> <table width="100%"><tr><td>dfsd</td></tr></table> </div> Now, there is an issue where ...
System: Operating System: Windows 7 - 64 bit I am attempting to manipulate the rotation of a div in Reactjs by using click and drag mouse events similar to this example written in javascript code, which works flawlessly. I created a ReactJs applicatio ...
I have created a unique website layout with 6 sketches placed horizontally in div containers. I am not concerned about the navigation style affecting usability. To achieve this, I have organized the div sections to be relatively positioned from left to ri ...
I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...
After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated ...
I'm currently utilizing a map script created by Derek Ender that integrates with Google Fusion Tables to display locations on a map. While the script is functioning well, I have received a request to make the sidebar list of locations clickable. The ...
Whenever a link is clicked, a loading animation (GIF) pops up and the new URL starts loading using window.location.assign(). The GIF animation halts after one second - even though the next page hasn't fully loaded yet. How can I keep it spinning unti ...
In the following code snippet, there is a HTML/PHP form with a drop-down menu and input boxes to select the Start Day of Week, Start Time, End Day of Week, and End Time. The condition specified is that when the same day of the week is selected for both the ...
I've been working on a web scraping project, but I'm facing challenges extracting href links from a particular webpage. The URL in question is . My goal is to gather all the article links using the href attribute. Below is an example of the link ...
I can't seem to get the column heading aligned perfectly with the rows below it. The headings always appear slightly to the right. I've already tried adjusting the margin and removing overflow auto, but nothing seems to work. Any suggestions on h ...
UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...
Currently, I am facing an issue with my website that is being loaded into the webbrowser control of my form. Despite loading the document successfully, when I try to retrieve the webbrowser.documenttext, I cannot seem to find a specific table that should b ...
How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...
I'm working on a login.vue file and I need to incorporate styling along with the necessary js and css files. Unfortunately, I'm clueless about how to achieve this within the login.vue file. Below is a snippet from the html file: <!DOCTYPE ht ...
Seeking guidance on a common issue I'm facing. I am creating a table using data from Firebase upon page load, and I want users to click on a row to view specific details of that item. It may sound confusing, but it will make more sense with the code p ...