This question already has answers here:
Center div in page
(2 answers)
Closed 9 years ago.
I've googled this many times, and I cant understand why my div wont center.
HTML:
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:auto;
}
It only centers horizontally and wont center vertically, whats the problem because im not seeing it.
Try something like:
#mydiv {
height:50%;
width:50%;
background:grey;
position:absolute;
top:25%;
left:25%;
}
If you need vertical centering too, refer to the Dead Centre approach, you will need a few extra <div>s but it should help!
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Hopely useful for you:
http://jsfiddle.net/Ug3RM/
#mydiv{
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
margin-top:-25%;
margin-left:-25%;
background:grey;
}
To vertical align you can try setting your margin like so:
#myDiv{margin:50% auto;}
Of course this will depend on your containing elements. However if the markup is as you have provided, it should display vertically aligned in the center...
OP,
Check this Fiddle. Centers both vertically and horizontally.
Uses the display:table and display:table-cell approach, which conveniently allows for vertical-align: middle to be paired with margin: auto.
Hope it helps.
Related
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I have an h3 with a height of 100%. Therefore the height is unknown. How can I center the text within itself? For the sake of the example, I have given the parent fixed dimensions but this is not the case. I have tried using vertical align but that doesn't work, I believe I may need to change the display to do that?
I don't want to center the text within its parent, I know various methods to do this. I want to know if it is possible to vertically center it within itself. The text needs to be 100% in both dimensions so that the link fills the parent div.
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions h3{
height:100%;
width:100%;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
Using table method,
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions a{
display:table;
width:100%;
height:100%;
}
.unknowndimensions h3{
display:table-cell;
vertical-align:middle;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
I want to align several div's into one line and also center the content vertically and horizontally.
The text to align vertically could be a single line, or a <p> paragraph.
To show n-number of divs in one line, there are 3 approaches
use display:table;
This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align
use float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end
use display:inline-block;
never used this method personally float method was considered instead of using this by me
Base CSS
/************Supported by IE8 and above *******************/
div.table {
width:100%; /* important */
display:table;
text-align:center;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
/************ Method 2 *******************/
div.inline {
width:100%;
display:inline-block;
text-align:center;
}
div.inline-div {
width:32%;
display:inline-block;
}
/************ Method 3 *******************/
.float-class {
width:100%;
text-align:center;
}
div.floatdiv {
float:left;
width:32%;
border:1px solid black;
}
.clearfloat {
clear:both;
}
fiddle showing all three methods in 1 place
To vertically center one line in a div
again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!
line-height
this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trick line-height:equal to height of parent div
position
idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like top/bottom
display:table-cell
highly recommended if IE7 and older support is not required, simply use vertical-align:middle;
Base css
div.fixed-div-height {
height:200px;
width:200px;
text-align:center;
}
div.fixed-div-height span {
line-height:200px; /* equal to height of the fixed div*/
}
div.unknown-div-height {
height:100%;
text-align:center;
position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
display:inline-block;
height:20px;
position: absolute;
top: 50%;
left:0;
right:0;
}
div.for-ie8-and-above{
width:100%;
display:table;
height:400px;
text-align:center;
}
div.for-ie8-and-above > div{
height:400px;
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing all three methods
To center a paragraph vertically in center
this is the tricky part
Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!
Simplest, use :
div.table-cell {
height:400px; /* can be anything, even in percentage*/
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing remaining 2 possible cases
Another solution posted here :
How do I vertically center text with CSS?
IE hack for display:tables : CSS Tricks
I aligned multiple divs within a table cell (td) by creating a container DIV, as follows:
<td>
<div class="containingDIV"> // container DIV with CSS as below
<div></div>
<div></div>
<div></div>
</div>
</td>
where css for containingDIV is:
.containingDIV {
display: flex;
}
I am trying to wrap an image with some adjacent text, and i can align it to top-left and top-right using align="" attribute or float. But how can i align image to the vertical and horizontal center of whole text after wrapping.
Like this:
I have tried below code,
<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>
You won't be able to do it with a single block of text (I can't think of a single instance where it's aesthetically pleasing and functionally desirable, but I'd love to be proved wrong), but you can with two columns. There's a great article on it here:
http://alistapart.com/article/crosscolumn
Essentially, you use pseudo-elements to create an empty space that is the same size as the image, then position the image onto that space.
Solution 1
Fiddle 1 for the image shown in the question:
CSS:
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
}
#main{
width:100%;
text-align:justify;
margin:0;
padding:0;
}
.class1{
position:absolute;
}
#child1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:justify;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Solution 2
If you want to wrap the text around the only way to do it is using float.See this Fiddle 2
CSS:
.class1 img{
float:left;
}
Solution 3
But the above solution will not allow you to center the image.For centering image you will have to do
some trick like this Fiddle 3 . But this will require large amount of effort to adjust writing between the two columns/divs.
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}