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;
}
Related
Please help, I have been stuck on this. I found many solutions online but not of them work in my case.
I'm trying to center the table. Here is how it looks now:
HTML:
<div class="container">
<table id="multTable"></table>
</div>
CSS:
#multTable {
width: 100%;
margin: 0 auto;
display:block;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
I tried this:
.container {
width: 100%;
}
#multTable {
margin: 0 auto;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
But the table overflows the page size:
What am I doing wrong here?
In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.
So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!
So this won't work:
{
width: 100%;
margin: 0 auto;
}
Instead, you should give the centering element a fixed width:
width: 400px; /* or whatever is needed */
margin: 0 auto;
That way it has some space around it.
Here, check this out:
https://jsfiddle.net/9gwcjvp3/
have you tried this :
.container {
//
}
#multTable {
margin: 0 auto;
overflow-x:scroll;
overflow-y:scroll;
}
Make your container the full width of whatever it resides in. Then make the table and specify a max-width.
.container {
width: 100%;
}
#multTable {
max-width: 100%;
}
I would help more to see the rest of your hml.
Only add this
.container {
display: flex;
justify-content: center;
}
I am creating a simple wordpress theme for this website and style.css applied on this site.
i want all images to be responsive. I tried this code.
img {
max-width: 100%;
height: auto;
}
It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).
How do i fix this?
Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.
Instead of max-width: 100%; try the following:
img {
max-width: 200px; /* Change this to what your logo is by its width */
width: 100%;
height: auto;
}
You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.
EDIT: For sitewide images this of course does not work, since they all don't have the same width.
For image tag write this css
img {
max-width: 100%;
height: auto;
width:100%;
}
And if you are using bootstrap in your theme then write this css
img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}
You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
And the CSS:
.image-wrap {
max-width: 600px;
width: 30%;
margin: 2% 0 0 2%;
overflow: hidden;
position: relative;
display: inline;
float: left; }
img {
width: 100%;
height: auto; }
#media only screen and (max-width: 767px) {
.image-wrap {
width: 96%;
max-width: 400px;
display: block;
float: none;
margin: 0 auto;
margin-top: 2%;}
}
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 the following html:
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
It has the following css:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
}
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
}
The image's margins aren't being set but its padding is. Also, when I set the margin to a specific value, the margins work. When I use the element inspector in Google Chrome, that line in the styles window doesn't have a line through it so I'm assuming it's valid css. I just can't figure out why it won't get set to auto.
You need to set the image to display:block;
demo http://jsfiddle.net/mCen7/
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
display: block;
}
I would appreciate you give us your actual objective.
As far as I understand, you simply want the img to be centered in your div.
img tags are inline tags, that is, share the behavior of a text or a letter. It's not a block, such as a div.
inline tags are horizontally centered like text, with a text-align: center style, as follows:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
text-align: center;
}
#image {
width: 300px;
height: 450px;
padding-top: 20px;
}
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
<div id="headermain">
<div id="logo">
net
</div>
i'm unable to center the #logo div inside of #headermain
i'm giving margin:auto; but nothing happends. #headermain is also centered by using margin:auto;
Use width property :
#headermain { width: 1000px; margin: 0 auto; }
#logo { width: 400px; margin: 0 auto; }
div#logo must have a width property for margin: auto; to work
Is it? #logo { text-align: center }