I'm trying to center a pdf file in the middle of my web page, but it's not letting me set the margin's to 0 auto, like it does for normal content.
I can achieve this with absolute positioning, but why is the normal margin property not working?
<html>
<style>
#ob{
width:800px;
height:800px;
}
#wrapper{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</div>
</body>
</html>
Whatever you are trying to center using the margin technique needs to have a width defined.
Try setting a width for the wrapper, or simply apply the margin:0 px to #ob
Give the wrapper a width, thats why its not centering i doesont know what to be compared in the center
#wrapper{
margin:0 auto;
width: 800px;
}
Use
text-align:center;
Here's a jsFiddle example.
You're centering the wrapper, which will be 100% width, so already centered. Move the margin code to the object and try again.
Just replace your style tag to this one and it will solved your problem, for details please look into the comments that I wrote inside the code.
<style>
#wrapper{
width: 800px; // It will set the width of the wraper
margin: 0 auto; // It will help the wrapper div to be centered of the document.
}
#ob{
width: 100%; // It will be streched upto the wrapper fixed width which is 800px
height: 800px;
}
</style>
try this:
<div id="wrapper">
<center>
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</center>
</div>
Related
I want create a responsive image in my doc.
<style>
img,.img {
width: 80%;
height: auto;
}
</style>
<body>
<div>
<img src="img/tools3/2.png" />
</div>
<body>
Now I try convert img to div:
<body>
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
<body>
But not showing any images!
If I change height: auto; to height: 100px; it works but it's not responsive else...
Also I add:
box-sizing: border-box;
clear: both;
to .img but not working.
You don't need the pic in the div, you can have that in the img tag.
The img tag can be changed on hover using css
.img:hover {
content:url(NEWPICPATH);
}
See this answer for more details on changing src this way.
To do responsive images you need to set the max-width property to 100%. Images always have to be an img tag unless you decide to use background-image on a div.
What you have to do is this ....
In html ....
<div style="width:50%;height:50%">
<img style="width:100%; height:100%;" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
</div>
you can give any height or width for the div.If you want you can use style in external style sheet.
I suggest you to try bootstrap.it is pretty easy.
looking at the below
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
The image will not show because
you have
style as "img/tools3/2.png"
A div is a container that can hold an image it, it does not have a source property like an image tag that points to a link.
If you want to make the image display like a div you can simply do
img{
display:block
}
However you can also set a div background to te an image like this
div {
width:put your width here;
height: put yout height here;
background-image:url("url here");
background-size: cover;
}
here is a
div {
width:500px;
height:500px;
background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
background-size: cover;;
<div>
</div>
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
The page is here:
https://gentle-day-3026.herokuapp.com/
The css file like this:
https://gentle-day-3026.herokuapp.com/stylesheets/base.css
another is to use reset.css to replace the base.css
(the new user just 2 hyperlink allowed)
Try to change some many times, include methods like:
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
but it didn't work.
Thank you for your help!
I even test it in a very simple html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
</head>
<body>
<div id="divMain">
<h1> hello </h1>
</div>
</body>
</html>
It still did not work!
On your current page, body has a fixed width of 720px. Remove this. Next, set the fixed width on your outer-most div that sits just inside the body. Additionally, give this div a margin of 0 auto, which will result in it being centered horizontally.
What you have done is fine. But you given a width to the body. Remove the width attribute from there. Try this CSS and it works:
body {
color: #999999;
font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
margin: 20px;
width: auto;
}
See base.css line no. 8 has the same width: 720px; for the body! And also, for the <div align="center"> change it to <div class="center"> and give css as .center {width: 720px; margin: auto;}. Please try this and let us know.
Finally you should be having this:
.center {width: 720px; margin: auto;}
<div class="center">
You need to set your body width to 100%, your <div> to whatever size you want (eg 720px) and its margin to 0 auto.
The sample code that you have posted works perfectly for aligning #divMain to the center (horizontally)...
Looking at the code you have posted for your site, it looks like you have defined a fixed width for your body element (see line 12 of base.css). Removing this fixed width, and then moving the correct width to the wrapper div (currently set using align="center") should solve your problem.
body{
width: 100%;
height: 100%;
}
.divMain{
width: 720px;
margin: 0 auto;
}
May be it helps you.
Try to add this style in your code.
You have 2 problems here:
You set the margin of <body> to be 0 (inline css above). What's more, <body>'s width is only 720px (base.css, line 8), which is smaller than the width of most desktop viewports. As a result, <body> snaps to the left of the viewport, with margin-left as 0 and plenty of space to the right. With <body> aligned to the left, its children (such as #divMain) cannot possibly look centered. What you can do is to either center <body> by using margin: 20px auto, or by setting <body>'s width to be 100% to fill the entire viewport.
The width of the child, #divMain, is larger than that of its body. You will have to set the width of #divMain to be smaller than 720px (e.g. 500px) - the only way for a child to be centered horizontally within its parent using margin:0 auto is for the parent's width to be larger. Of course, I don't think you intended to have #divMain smaller than 1024px in width, so I'd suggest setting <body>'s width to be 100%, which almost guarantees that its width will be larger than #divMain's.
In short, you can either have:
body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}
or
body{width:100%;} #divMain{width:1024px;margin:0 auto;}
Hope that helps.
HTML
<body>
<div class="div-body-width">
....
</div>
</body>
CSS
body {
margin: 0px;
padding: 0px;
}
/*Insert here your width*/
.div-body-width {
width: 1024px;
margin: 0 auto;
}
Wrap the content of your body in a div :
<body>
<div id="page">
...
</div>
</body>
Then in your css :
#page {
margin: auto;
}
I have the following CSS:
html, body {
background-color:black;
font-family:"arial bold";
overflow:auto;
text-align: center;
}
div#content {
width:792px;
height:100%;
padding:0px;
}
div#header {
height:216px;
width:100%;
}
The HTML code I have is:
<html>
<head>
<title>
Think in a NEW BOX.
</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body onload="">
<div id="content">
<div id="header">
<img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" />
</div>
</div>
</body>
</html>
Now, this works great in IE. The div centers perfectly (header). In Google Chrome, however, the div is left aligned. Am I missing something?
I had this 'problem' too today. Solved it with using display: inline-block;. Working browsers won't change and if it's already working, this won't mix up IE old.
You are missing:
A doctype (so IE is emulating bugs from the IE 4/5 days to cope with awful, ancient webpages)
That a div element is a block element so text-align does not influence it
auto left and right margins on the div.
See Centring using CSS for a longer explanation with diagrams
Even better solution is to center the block like this:
#content
{
margin:0px auto;
}
This method is used by... well, just about everyone (including SO).
Use
#content {
margin-left: auto;
margin-right: auto;
width: 100px; /* Your width */
}
to center your div. It allows your div to choose a variable margin for left and right, that results in a centered div. This should work for all browser.
Make sure you have a fixed width and use margin: 0 auto;.
how can i set div position at the center of the page with size, for example, 80%/80%.
UPD: margin: 0 auto; works, but only for horizontal alignment. And i also need vertical.
This page talks about some different ways to achieve vertical centering using css. I've used method 2 before with success but I consider all of these a hack at best.
Set a fixed width and auto-margins.
<style type="text/css">
#center {
width:300px;
margin-left:auto;
margin-right:auto;
}
</style>
<body>
<div id="center"></div>
</body>
This does what you want, but it is not pretty.
<div style="margin: 0 auto;width:80%;height:80%;">
This will probably not work for you however because you did not provide code
</div>