I'm using an embedded SVG file as the top element on my page. (a header?)
It loads just fine, but nothing I try seems to get it centered.
Here's what I'm using at the start of the body:
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
I've wrapped it up in a DIV and used CSS to "margin:auto" but can't get it to budge without just padding it. The problem is that it goes wonky when I resize the window.
HTML
<div class="parent">
<embed src="images/bannertest.svg" width="1180" height="200" type="image/svg+xml"/>
</div>
CSS
.parent{
display:block;
margin:0 auto;
}
or use this css
.parent embed{
display:table;
margin:0 auto;
}
I am adding code here. Check it may be it helps you..
HTML:
<div>
<img class="papa" height="100" src="http://s.cdpn.io/3/kiwi.svg">
</div>
CSS:
<style>
div { text-align:center}
</style>
Here is a fiddle http://jsfiddle.net/6sRR2/
Hope. It Helps You :)
Related
I have an image which needs to be in a particular location, so I made a div in the place where I need it to be and added an img tag inside it, however although the img tag is inside the div tag the image goes into the bottom right corner of the page. This does not happen when the browser window is small.
CSS:
#teamimg {
width:10%;
height:50px;
background-color:blue;
overflow: auto;
float:left;
}
HTML:
<div id="teamimg">
<img src="Images/picture.png" alt="Image" height="18" width="20" class="itemImg" style="float:left">
</div>
Set overflow:hidden on the #teamimg rule, then you can put the image as a background-image with background-size:cover;. :)
I'm trying to create a html document to be shown on iphone and ipad.
It's a simple one but I've some problems with the image position and I'm not sure if I should use relative or absolute position.
What I'd like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.
This code is working on portrait but not on landscape as the image will not be in the center if the page.
I'd like also to have some space between the image and the youtube frame.
This is my actual code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
<div align="center">
<img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing" width=90 height=130>
<p>
</p>
<iframe width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
</body>
</html>
There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.
In a pure css solution, you should do the following to the html.
<div class="container">
<img class="rndImage" src="http://myimage.org" alt="image is missing"/>
<iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>
And add the following CSS in style block or in an attached css style sheet.
iframe.youtube
{
width:320px;
height:180px;
display:block;
margin:15px auto;
}
img.rndImage
{
display:block;
width:90px;
height:130px;
margin:15px auto;
}
div.container
{
position:relative;
width:100%;
margin:5px, auto;
}
The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.
I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
The div expands to 100% as it should but the image does not center itself. Why?
Because your image is an inline-block element. You could change it to a block-level element like this:
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
and it will be centered.
You need to render it as block level;
img {
display: block;
width: auto;
margin: auto;
}
Add style="text-align:center;"
try below code
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
I've found that I must define a specific width for the object or nothing else will make it center. A relative width doesn't work.
open div then put
style="width:100% ; margin:0px auto;"
image tag (or) content
close div
<div style="text-align:center;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
I have found...
margin: 0 auto; works for me. But I have also seen it NOT work due to the class being trumped by another specificity that had ... float:left;
so watch for that you may need to add ... float:none; this worked in my case as I was coding a media query.