<div style={{textAlign:'center !important',margin:'0 auto !important'}}>
<img className="lazy" src={require("../images/dragonfire.jpg")} style={{display:'block !important', margin:'auto !important', position:'absolute', left:'0',right:'0',top:'0',bottom:'0',height:'40em',width:'40em'}}/>
</div>
I have looked through a lot of posts here and external sites as well on this topic and it seems that nothing is working. I have a big image that I just want it to be centered in the screen view. The div is a background for the banner on a page. I can get it to the right size but it just shows the left half of the image, I cannot get it to center and just cut off the left and right sides depending on the sides of the screen.
Try removing:
left:'0',right:'0',top:'0',bottom:'0'
This is fixing the position of your image to the top-left corner.
Also as #Daniel has mentioned in the comments, change the position:absolute to relative since it restricts the flow of the content inside the div.
Here is the working model:
div{
background: red; /*Just for clarrification case*/
textAlign: center !important;
margin: 0 auto !important;
}
img{
display: block !important;
margin: auto !important;
position: relative;
height: 100px;
width:100px;
}
<div>
<img className="lazy" src="http://mxtrianz.me/wp-content/uploads/2017/05/small-pictures-20-the-data-lab.jpg"/>
</div>
P.S. Comment on your code: Please try using external or internal styling and refuse using inline styling as it reduces the readability of your code.
Related
I'm fairly new to CSS coding. I'm attempting to center an image and cannot get it to center. From what I know, the relevant code is as follows:
The CSS Code:
#header img {
align: center;
margin-top: 5px;
margin-left: 10px;
}
The code as it is on the HTML file:
<div id="header">
<a href="$settings[shopurl]">
<img src="https://capa.lunarmania.com:2083/cpsess1188922546/viewer/home%2famysp0%2fpublic_html%2fimages/AmyPromos.png" border="0" align="center" alt="" />
</a>
</div>
I feel as though I'm missing something but I cannot find it or figure it out. Any help at all is appreciated. The image sits stubbornly on the top left of the webpage instead of centering in the header like I ask it to do.
A few problems. First, it's text-align, not align.
Centering things in CSS sometimes isn't as simple as setting text-align: center. Sometimes, you'll have a block-level element which is as large as its contents; in this case, if your div is as big as the image, it won't center the image because centering it in the div won't move it. Make sure that your div is also centered, or that it's as big as the thing inside which you want to center the image.
Also, text-align: center affects contents inside an element, not the element itself. So, in this case, you want the centering CSS on #header, not just the image.
Finally, if you want to physically center an element by itself, it needs to be a block-level element (i.e. display: block, which is default for divs) and have an automatic margin on the left and right. This can be achieved by setting margin-left and margin-right to auto, or using a shorthand like margin: topbottom auto or margin: top auto bottom.
In this particular case, you probably just want to set text-align: center on the #header element, but in general, "centering an image" is sometimes more complicated than just one line.
You need to center the text inside your #header rather than center the image. Check out this fiddle: http://jsfiddle.net/10py5mu6/
#header {
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
border: solid 1px #000;
}
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
as the title suggests, I am trying to center the source of an image in it's image tag. The images kinda must have a 212px width, and the img tag has a width of 210px.
So instead of losing both 1px collumns from the right, is it possible to lose 1 from the left and 1 from the right?
Thanks in advance.
EDIT: my image gets compressed as it seems, not cropped, which is even worse :)
You could add a border via CSS:
img {
border: 1px solid white; /* or same colour as your site's background */
}
Or alternatively put a containing element around the image, e.g.
<div class="img"><img src .. /></div>
.img {
text-align: center;
width: 212px;
}
I would recommend wrapping the image tag inside a div. You would then set the div to have a width of 212px then set the image tag to have:
margin: 0 auto;
This line tells the image to have 0 margin on the top and bottom of the image and the auto parameter for the left and right margins forces the browser to center the element inside its containing element, in this case the div wrapper.
The best way to do this is to contain the image within a div:
<div id="image_container">
<img id="img" src="/whatever.jpg"/>
</div>
CSS:
#image_contrainer{
width:212px;
text-align: center;
}
#img{
width:auto;
margin:auto;
}
This may not be exact, but its the correct idea to do this sort of thing. Just play around until it works.
I'm using Galleria and trying to utilize just the thumbs and lightbox sections, so that i don't have a large image on the page. I'm looked at cmotion as an alternative but dont like the way it doesn't automatically adjust the thumb dimensions to fit the image. I was hoping i could add some code to only call the thumb part of the gallery? any thoughts? Thanks
The generated divs concerned are nested as follows:
<div class="galleria-container">
<div class="galleria-stage">
...main image here...
</div>
<div class="galleria-thumbnails-container">
...thumbnails here...
</div>
</div>
.galleria-stage must have a proper height or the image gallery will fail but you can stop it from displaying with display:none. However, both .galleria-stage and .galleria-thumbnails-container are absolutely positioned to sit one on top of the other, so you will still have an empty space where the main image should be.
css with !important provides a quick fix by overwriting the positions so they are both aligned to the top, one on top of the other.
.galleria-stage { display: none; }
.galleria-stage, .galleria-thumbnails-container {
height: 200px !important; //thumb height
top: 0px !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
}
.galleria-thumbnails-container { z-index: 2 !important; }
Change height to your thumb height and change 0px if you want padding around your images.
suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.
Question:
1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image
1a. vertical centering is unimportant and can be omitted
2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border
2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image
Cropped or not, in browser has to be seen the border around the visible part of the image
mercator has already done some of the job here as described below:
You can make it work if you wrap
another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative on the
'outer is marked with * so it will
only work in IE6/7. You could move it
to a conditional IE stylesheet if
that's what you prefer, or remove the
* altogether. It's needed to avoid
the now relatively positioned children
from overflowing.
I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:
<div class="outer"></div>
and css:
.outer {
width: 300px;
height: 200px;
border: 1px solid red;
background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}
This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.
The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.
You can center the image in the visible area by giving it margin-left = margin-right = auto.