I am facing an issue with centering a div containing an image. When I try using margin: 0 auto, it does not work as expected.
<div style="display: inline-block">
<img src=""/>
</div>
Can anyone please guide me on how to center the entire div, including the image within it?
To center the content of the div, apply text-align: center to its container:
<div style="text-align: center">
<div style="display: inline-block">
<img src="..."/>
</div>
</div>
By applying the text-align: center property to the parent of your inline-block div, you can achieve the desired alignment.
Check out this demo for reference.
It's important to note that while this method may work in most browsers, older versions such as IE<8 may not support the use of display: inline-block on the <div> element. This limitation is well-documented on sites like quirksmode.
According to quirksmode, IE 6/7 will only recognize the value on elements with a natural display of inline.
To ensure cross-browser compatibility, consider using an alternative element (like an inline <span>) or utilizing newer HTML5 elements which can be styled as inline blocks without issue on older IE browsers. For example, the <figure> element could be a good substitute in this case.
To perfectly ALIGN the image within your INLINE-BLOCK div, you will need to apply the following styles to your img tag
position:relative;
left: 50%;
margin-left: -57px; /*Offset half of the image's width */
See a demonstration here: http://jsfiddle.net/5eU3Y/
However, if you aim to CENTER the entire div itself, then assign the container text-align: center; property. View this example http://jsfiddle.net/5eU3Y/1/
If you solely want to CENTER this specific inline-div block, you must determine its width. Check out this demonstration: http://jsfiddle.net/5eU3Y/2/
I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...
A fantastic code snippet can be found at this link for creating an animated navigation bar. The only thing left on my wishlist is for the slider to reset to its original position if a tab is not selected. Currently, it remains static regardless of selectio ...
I am currently utilizing AngularJS, which enables me to utilize ng-show and ng-hide in order to display or hide elements based on a logical condition. My goal is to animate the size changes of the container when the child objects are shown or hidden, creat ...
My menu contains PNG icons. I am looking to achieve a hover effect where the PNG icon changes to a GIF icon when the user hovers over a menu item. I've attempted the following: jsFiddle $("#image").mouseenter(function(){ // I can set GIF url her ...
I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...
I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...
Trying to center the content of MAIN both horizontally and vertically on the page has been a challenge. None of the solutions I've attempted seem to work, and it's frustrating because I had it working before making changes that caused it to reset ...
I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...
Check out my website: If you click on the image "woman study 01" in IE8, you may notice that the transparent black background doesn't extend all the way down the page. Any suggestions or assistance would be greatly appreciated! I have already experi ...
I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...
I am currently facing an issue with a facebook like button placed in the caption section of a slideshow div, located at the far bottom right corner. The problem arises when the 'post to wall' prompt pops up below the like button, but is cut off d ...
Can someone help me with creating a script that changes the font size when a button is clicked? The buttons should be labeled 'normal', 'medium', and 'large'. ...
Why is it that every time I upload my project file to GitHub, the output size increases significantly compared to when viewing it on the VS Code Go-Live server? This discrepancy seems to occur consistently across all of my project files. Can anyone expla ...
I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fi ...
I'm currently exploring how to override Material UI styles with a nested component. For instance, what if I want to increase the bottom border height on an active Tab, which is applied by the underlying ButtonBase. Below is the style definition: con ...
Currently working on the navigation for my website and encountering some unexpected behavior. Check it out here: Whenever I click on the menus, they seem to jump. Any thoughts on why this might be happening? Seems like the issue is related to the locatio ...
While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...
I am currently working on creating an index for a large list. However, I have encountered an issue where clicking on a letter to display its contents also pushes the other letters on the index bar (left nav) down. I want the other letters to stay collapsed ...
I'm currently working on designing a card using Bootstrap that includes some social media icons from Font Awesome. However, I've encountered an issue where all the icons are displaying as boxes with black outlines around them. Additionally, the h ...
My goal is to vertically align the text in the center of its row within a bootstrap table, regardless of its length. I've been trying to achieve this using vertical-align: middle; line-height: 90px;. Adjusting the line-height seems to work for center ...