I've seen some other posts on this but even using their method on my code doesn't seem to be working for me. What am I doing wrong when trying to center these divs?
This example works fine for me (taken from another SO post).
But this one (which is my code) doesn't behave the same and isn't centered properly.
here is my code that is also in my JSFiddle
.pdf-pageimage-container {
display: block;
margin: 0px auto;
border: 1px solid #EEE;
}
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:812px;height:792px;">
<img style="width:812px;height:792px;" />
<div>
you are not ending div tags.
<img>
can work without "/"
and to align horizontally in center use
<div align="center" class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;"></div>
Your HTML is incorrect. You are opening <div> tags but not closing them with </div>, so you are opening lots of nesting div elements.
You can place them in a wrapper div with a fixed width and then center each of them with auto margin.
Let's say that the wrapper has an ID wrapper and the sub-elements all have the class child. In that case you can for example set the following in your CSS
#wrapper{
width: 800px;
}
.child{
margin: 0 auto;
}
First off I would close the endings of the "div" tags like so just to stay valid with your code.
I'll assume that these divs will stack on top of each other so add this to your "pdf-pageimage-container" css class:
.pdf-pageimage-container {
clear : both;
}
If you want the divs to float next to each other one after another you could use this instead
.pdf-pageimage-container {
float : left;
}
Hope this helps.
Related
In the codes below, I have two <div> tags. I want to align one <div> to the left and the other to the right, with the same height and width. Please help me to do this.
<div id="imgShow">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>
Set the floats for each div with CSS: example
.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}
Try below code:
Demo
<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>
You should use floats:
<style>
#imgShow, #divComplete{
float:left;
width:50%;
}
</style>
If you want both at different widths, simply separate the css selectors and add the desired width.
PS: Avoid using inline CSS unless you need to, transfer these to a separate CSS file and include it in the head section
You can use twitter bootstrap css for styling your divs. Simply addclass="col-xs-6" to each div. Remember class="col-xs-12" is the full width that the div can take based on the width of the parent container. Using -xs- instead of -md- shrinks the div upon resize instead of knocking them down. If you want margins simply add change them to col-xs-5s then add a col-xs-2 div in between. It's also good practice to use parent divs with container-fluid and row classes
In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:
<div id="container">
<div class="col-md-10"></div>
<div class="well col-md-10">
<p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
<hr>
<div class="well col-md-6" align="center">
<p> <span class="glyphicon glyphicon-info-sign"></span>
Start your work by setting a name for your Desk</p>
</div>
</div>
<div class="col-md-10"></div>
</div>
It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!
Here's my CSS:
hr {
border-color : #474343;
}
.header-dimensions {
width: 110px;
height: 50px;
}
.logoname-dimensions {
display: inline;
width: 115px;
height: 40px;
}
.navbar-pad:{
padding: 0;
}
.right-float{
float: right;
}
What you are trying to do is kind of working against itself.
First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.
Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.
So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.
Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.
Please consider the jsfiddle demo where I've laid out 7 cards with transform effects.
Now I would like to apply a different margin to individual images such that the card2 is for example 15px lower, card3 is 5px higher etc.
However, when I apply for example margin-top: 15px to card2, all cards in the div are rendered with margin-top: 15px
Another issue is that the centered div is not really centered when applying width: 100% to it.
<div class="centered">
<div class="container">
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>
http://jsfiddle.net/kristofvhren/wtDE4/
Try this:
Remove inline-block property from images and use
img {
width: 125px;
display:block;
float:left;
}
instead..
Use 'float:left' property in 'img' tag and you can use margin in '.card2'
I'm using the following code in body section.
<center>Get Started</center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
You can do this:
<div style="text-align: center">
Get Started
</div>
You can use css like below;
Get Started
You can put in in a paragraph
<p style="text-align:center;">Get Started</p>
To align a div in the center, you have to do 2 things:
- Make the div a fixed width
- Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
Center
</h4>
</body>
</html>
There's also a handy tag... whatever you put in between, gets centered.
Like so:
<center>
<a href..... whatever>
</center>
you can try this
display inline-block to make it fit width,
margin-left to make it move 50% away from left,
and transform translateX to make it center his position
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
In your html file:
Get Started
In your css file:
.hpbottom{
text-align: center;
}
I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;