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
Related
i have a problem in my css, i cant seem to center my image, unless i use padding, i tried using flexbox, wit justify-content, and align items, but it wont work, i don't know what to do, no matter what it wont center, unless i use padding. Can somebody help?
here is the code so far:
img {
padding: inherit;
margin:auto;
text-align:center;
}
here is the outcome of the webapage
Try This:
img {
padding: inherit;
margin:auto;
width: 200px;
display: block;
}
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
Option 1:
Setting a width so you can sets the margin to 0 auto
img { width:<image_size> margin: 0 auto }
Option 2:
Use block display and set the margin to auto
img { display: block; margin:auto; }
Use
img {
display: block;
margin:0 auto;
text-align:center;
}
Resuming all the answers:
If your image have the property display block, to center your image you will need to do the following:
img {
display:block;
width: 200px; // You need to add a fixed width
height:auto // Optional but i recommend, in case of you need a proportional redimensioning
margin:0 auto;
}
If your image "lives" free inside of your content, without display property, then you just need to center with the property text-align:center.
Example:
.center{
text-align: center;
}
<p class="center">
<img src="path/to/your/image.jpg" alt="Image Alt">
</p>
I hope it helps you.
please try to set the margin-right and marign-left to null.
img {
padding: inherit;
margin-left: 0;
margin-right: 0;
text-align: center;
}
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
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;
}
I have the following Html code
<div id="team">
<h1>Team</h1>
<img src="assets/divider.png" id="divider">
<img src="assets/team.png" id="team_pic">
</div>
The following CSS
div#team {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
right:auto;
left:auto;
}
However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.
then I put the following into the child elements.
div#team img#team_pic {
width:704px;
height:462px;
margin-left:auto;
margin-left:auto;
}
Nope, nothing happen, the elements still to left and not centered.
You need to set a width to #team, for example:
div#team {
margin: 0 auto;
width: 800px;
}
... which is a shorthand version of:
div#team {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 800px;
}
Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.
img{
display: block;
}
float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.
Team needs to have a width to be able to use margin: auto.
div#team {
margin: 0 auto;
width: 400px;
}
Here is a fiddle: JS Fiddle
*Use the
display:block;
for the images classes.*
#team {
margin: auto;
width: 400px;
}
Basically margin depends on width if and only if we want to show our div in the center of the page.
If you donot want to give fixed width then we can go for width: max-content;
#team {
width: max-content;
margin: 0 auto;
}
I have a responsive 3x3 grid of video thumbnails that use pretty photo to lightbox vimeo clips. It works great at some resolutions, but as you resize the width of the browser window, it rapidly changes from 3x3 to this nonsense.
This is the offending CSS.
.thumb
{
float: right;
width: 25%;
height: auto;
margin: 2%;
}
.maincontent
{
margin:0 auto;
width:90%;
float:right;
}
And a snippet of the HTML if that matters.
<div class="maincontent">
<a href="http://vimeo.com/428525" rel="prettyPhoto" title="">
<img class="thumb" src="http://ftfrmedia.com/images/thumbnails/Overview-thumb.jpg" alt="Company Overview" width="60" />
</a>
I'm seriously stumped...
I think this is a problem with floats in .thumb and img.
Replacing the floats with display: inline-block should resolve the issue:
.thumb {
height: auto;
margin: 2em;
width: 25%;
}
img {
display: inline-block;
*display: inline; /* IE7 hack as it does not */
*zoom: 1; /* support display: inline-block */
height: 3em;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: -1.6em;
width: 3em;
}
Update
As pointed out by #DaveHaigh below, there is no need to use display: inline-block on the img element as this already accepts a height and width property.
Therefore, just removing the floats will fix this problem. If you would like to keep the right to left flow of the images then you can add direction: rtl to their parent:
.maincontent {
direction: rtl;
}
The downside to this would be that it would also flow any text right to left, but this does not appear to be a problem in your website as you are not using any text within the .maincontent element.
remove the floats on the .thumb and img. And also replace the margin: 2em; on .thumb with a percent value e.g. 2%.