I'm having trouble centering an image on my website. Can someone help me figure out what I need to change or add in order to get the image centered?
#img-wrap {
width:450px;
clear:both;
display:block
}
#img-wrap img {
margin:0 auto;
text-center:center;
height:100px;
width:100px;
background:#000;
}<div id='img-wrap'>
<img src='https://www.google.co.in/images/srpr/logo11w.png' />
</div>Thanks.
It is essential to use the property text-align instead of text-center. Furthermore, remember to assign this property to the parent container of the image, not directly to the image itself.
#img-wrap { text-align: center; }
There are two options available, but it appears that you are mixing them up.
You can either apply text-align: center to the parent element, or use margin: 0 auto on the child element with a display property set to block. This confusion arises because the img tag has a default display property of inline-block.
Parent with text-align - http://jsfiddle.net/BramVanroy/w0jecf01/2/
#img-wrap {
width:450px;
border: 3px solid black;
text-align: center;
}
#img-wrap img {
height:100px;
width:100px;
background:#000;
}
Child as block - http://jsfiddle.net/BramVanroy/w0jecf01/1/
#img-wrap {
width:450px;
border: 3px solid black;
}
#img-wrap img {
margin:0 auto;
height:100px;
width:100px;
display: block;
background:#000;
}
Implement the following CSS modifications:
#img-wrap {
width:450px;
clear:both;
display:block;
text-align:center;
}
#img-wrap img {
height:100px;
width:100px;
background:#000;
}
OR
#img-wrap {
width:450px;
clear:both;
display:block;
text-align:center;
}
#img-wrap img {
margin:0 auto;
height:100px;
width:100px;
background:#000;
display:block;
}
I am encountering an issue when trying to incorporate a modal dialog with a specific CSS style within a R Shiny app. Individually, I can successfully implement a modal dialog without the CSS style and apply the CSS style without any issues. However, when a ...
Greetings! I am in the process of creating a website with a professional design. I'm trying to decide between using Bootstrap 3 or Foundation 5 for my CSS framework. Which one do you recommend for designing purposes? Is there another CSS framework t ...
While developing my sorting visualizer app in React, I have encountered a slight issue with the rendering. The graph structure of my visualization appears to be a bit "jiggly" at the moment. To provide some context, here is the current setup of my graph w ...
After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...
I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...
As a beginner in the world of HTML and CSS, I'm facing some challenges with making buttons appear active. My goal is to have button1 highlighted by default when it's selected, and upon clicking on button2, the content above should change successf ...
Currently, I am in the process of developing a landing page using a combination of HTML/CSS and Javascript. Everything seemed to be functioning smoothly with the media query max-width: 768px. However, when attempting to implement the media query for min-wi ...
I'm facing an issue with printing my Morris bar chart results. Everything looks fine in HTML, but when I try to print it, the layout seems off. Here is what I have tried so far: <script> function myFunction() { window.print(); } </script ...
I've been keeping up with the latest CSS3 elements such as box-shadow and text-shadow: -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; However, in your experience, have you come across any common pitfalls or gotchas (rel ...
Creating a navbar with two li tags - one for language and another for currency. However, when the screen size is extra small, the li tags do not float left as intended, instead they stack on top of each other. How can this issue be resolved? Additionally, ...
Is it possible to have a textarea box with fixed dimensions, followed by a table of the same size that does not dynamically resize when the window is resized? I attempted to achieve this by styling the table with table{ table-layout: fixed; width: 100px; } ...
Greetings. I am facing some difficulties in retrieving the URL with the passed argument (pk). An error occurs where I receive post_edit, which is related to another application on the website. Here is the error message: NoReverseMatch at /questions/questi ...
Trying to integrate content from my Veetle.com channel onto my personal website has proven to be quite the challenge. Initially, I attempted to modify an iframe with CSS to display only the schedule information, but encountered limitations due to using 3rd ...
Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...
Being new to PHP programming, I encountered an issue while trying inputting an HTML tag into a PHP file. This snippet generated an error: <?php $a = "Begin"; $b = 12; echo $b . " " . $a . " " . "This is a PHP file <br/>"; echo strlen($a); echo s ...
There seems to be a problem with the page refreshing faster than the query execution. I have an UPDATE query to update my database with values in my fields, triggered by pushing a button. However, upon clicking the button (which refreshes the website), th ...
I'm new to JSoup and trying to generate HTML from scratch, rather than parsing a file. I've been searching for examples of how to accomplish this task but haven't had much luck. So far, my attempts have been unsuccessful. Below is the code I ...
I'm on a quest to incorporate grid drag-and-drop functionality into my project. While there are numerous frameworks available that offer this feature, one of the most popular options is JQuery UI's sortable library. However, I am specifically lo ...
I'm completely new to this, so please bear with me, but I have a question. I've been attempting to vertically align a div in the center of my webpage, but I can't seem to get it to work. The text always ends up loading in the top left corne ...
My Ruby on Rails page is struggling with slow performance. It's currently generating a hierarchical, unordered list using recursive SQL calls, which has proven to be inefficient. After optimizing the SQL query to retrieve the necessary hierarchy infor ...