I have a img which I need for centering, I try margin: 0 auto; but still can't center the img. How can I?
Thank you
<div>
<img src="../p66.jpg" />
</div>
div{margin:0 auto;width:100%;}
img {margin:0 auto;}
div{margin:0 auto;width:100%;text-align:center;}
You can use text-align: center in container, if you don't have img width. Otherwise, if you set image width, and display: block, margin:0 auto on image will work...
E.g. img {margin:0 auto;display:block;width:100px}
So you can do something like this...
CCS
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
HTML
<img src="blwebcam-sample.jpg" alt="Suni" class="center" />
I found this searching Google.
Source: http://webdesign.about.com/od/beginningcss/a/aa012207.htm
Related
I have an image inside a DIV. I want the image to shrink if the size of the div goes below the size of the image. Bu I also want the image to be centered in the DIV.
This is my HTML:
<div id="logo">
<img src="/images/logo_2016.jpg">
</div>
This is my CSS
#logo img {
max-width:800px;
width: 100%;
}
This works to resize the image exactly like I want but the image is not centered in the DIV. If I try to center the image with:
#logo img {
margin:auto;
max-width:800px;
width: 100%;
}
Then it is centered but no longer resizes with the div.
How can I get it to do both? Thanks.
You forgot to add display: block;.
#logo img {
margin:auto;
max-width:800px;
width: 100%;
display: block; /* new */
}
You can add display:block; to the image element. You can also set the text-align:center for the #logo element which is kind of a hack to it.
JSFiddle: https://jsfiddle.net/
Try setting #logo to a max-width also and place a text-align: center on the image, with you can style as an inline-block. See this fiddle:
https://jsfiddle.net/7ewcbr95/
#logo {
max-width: 1000px;
height: auto;
text-align: center;
background: #333;
}
#logo img {
max-width:800px;
display: inline-block;
}
<div id="logo">
<img src="http://placehold.it/350x150">
</div>
I am trying to make my site logo/banner fit the content box correctly.
Unfortunately, it is appearing at different widths on different computer resolutions and window sizes.
This is also happening with my banner ad within the content box.
CSS
#logo {
max-width: 100%;
height: auto;
width: auto;
}
HTML
<div id="logo">
<center>
<img src="logo.png" alt="Image of Traffic Monsoon">
</center>
</div>
The website is here.
To center an inline level element like <img> tag, you can set text-align:center; on the container, with your example:
#logo {
text-align: center;
}
<div id="logo">
<img src="logo.png" alt="Image of Traffic Monsoon">
</div>
In addition, remove <center>, it has been deprecated. And add following lines to make the image to shrink to fit automatically when its intrinsic width is larger than the container:
#logo img {
max-width: 100%;
height: auto;
}
<center>is deprecated so don't use it.
To fix your issue you need to target the img not the div
use margin:auto and display:block to center the image instead of the deprecated center
#logo img {
max-width: 100%;
height: auto;
width: auto;
margin:auto;
display:block
}
<div id="logo">
<a>
<img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon">
</a>
</div>
If you want to apply this generally to all images in the site, just do this:
img {
max-width: 100%;
height: auto;
width: auto;
}
Wrap your whole page in a <main> element, or a wrapper class. Set your max-width on that element, and all subsequent elements can have width:100% set.
Please try this:
First of all wrap you entire page with a div named wrapper.
<div class="wrapper">your code here</div>
Then apply this css below:
.wrapper {
margin: 0 auto;
width: 1574px;
}
#logo {
margin: 0 auto;
text-align: center;
width: 1331px;
}
#logo img{
text-align: center;
width: 96%;
}
I know I must be missing something stupid but I can't figure out why my logo will not center on our mobile site. Please check out this site at under 770px screen width: http://www.estiponagroup.com/dev
CSS:
.main-header .logo-and-menu-container .logo-column {
float: none !important;
margin: 0 auto !important;
max-width: 770px !important;
width: 100% !important;
display: block;
min-height: 120px;
}
.header-logo.logo-image img{
display:block;
position:relative;
margin:0 auto;
width:100%;
max-width:304px;
}
.main-header .logo-and-menu-container .logo-column::after{
content:'';
display:block;
clear:both !important;}
HTML
<div class="logo-column">
<style>.logo-image { width: 304px; }</style><a class="header-logo logo-image" href="http://www.estiponagroup.com/dev">
<img width="304" height="108" alt="logo" src="//www.estiponagroup.com/dev/wp-content/uploads/eg-logo-300.png">
Can anyone point me in the direction of getting this logo to center?
Add this to that media query
#media (max-width: 770px){
.logo-image {
max-width: 384px;
margin-left: auto;
margin-right: auto;
}
}
You need to understand how css works.
All your elements inherate some property from their parents.
So in you case the website your are showing the logo-column class is limiting the size of the div, so the logo can't be in the center because he is limited widrth 80px and with a margin-right.
So i tested in my browser and changed to this.
Change the inline [line 86] class .main-header .logo-and-menu-container .logo-column to this
width:100%
max-width:100%;
I also added a margin-left and right to auto and set to display block, doing this (raising the width size and setting the < a > element to the code below allow your logo to be right in the middle.
<a style="margin-right: auto; margin-left: auto; display: block;" href="http://www.estiponagroup.com/dev" class="header-logo logo-image">
Ps.: You should change the "hard code" in the css to the css file.
Check the result : http://snag.gy/pfsk1.jpg
Delete rule:
media="all" .header-logo.logo-image
display: block;
and add:
margin: 0 auto;
display: block;
on the image (for right media size).
Give a margin: 0 auto; on the tag around the logo in the media query
.main-header .logo-and-menu-container .logo-image {
margin: 0 auto;
}
here is a complete and perfect reference for centering every things.
centering elements with css
I have a simple gallery of square thumbnails, all of them have the same dimensions. Every thumbnail is also a link. I want this entire gallery to be horizontally aligned, but "margin: 0 auto;" doesn't work. Thanks for any help!
http://jsfiddle.net/ds2uockq/
HTML:
<div id="gallery">
<img src="http://placekitten.com/g/150/150" />
...
<div>
CSS:
#gallery {
margin: 0 auto;
}
Use text-align: center;
#gallery {
margin: 0 auto;
text-align: center;
}
working demo
Why did I use text-align?
Because #gallery contains inline element i.e. <a>. And to center an inline-element we use text-align.
Just give the width to the body and container.
CSS:
body{
width:100%;
}
gallery{
width:70%;
margin:0 auto;
}
Here's a simple method
#gallery {
display: block;
width: 100%;
text-align: center;
}
I am not able to center the banner img. I want it to adjust size when the window size changes. (to keep it in proper proportions on tablets/smartphones)
The image max size is 918px but margin auto does not seems to work. Does anybody have any ideas what could be the problem?
Thanks in advance
original page: http://www.syntra-limburg.be/nieuws/nieuwe-gecertificeerde-opleidingen-2014-2015
<style type="text/css">
#banner img{
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>
<div class="container-12">
<div class="grid-12" id="banner"><img alt="" src="/sites/files/content/slides/20140616-gecertificeerde-opleidingen-2014.png" /></div>
</div>
Add display: block to img
#banner img
{
display: block;
}
The banner image is getting stretchable, it doesnt look good when in smaller screen size. Remove it from the inline styles.
And try this
#banner img{
width: 800px;
max-width: 100%;
display: block;
margin: 0 auto;
}
just try this
#banner { text-align: center; }
You have to set the width to 100% and it works.
You'll need:
img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}