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>
Related
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>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I'm trying to horizontally center a div-block containing images (playing cards placed there by Javascript), but somehow it doesn't work (images are still left-aligned). Here's the HTML:
<div id="dealerarea">
<div id="dealercards">
<!--Images by Javascript-->
</div>
</div>
And here's the CSS:
#dealerarea{
position:absolute;
width:100%;
height:96px;
top:15px;
}
#dealercards{
display: block;
margin-left: auto;
margin-right: auto;
}
What i'm doing wrong? Thanks in advance!
Edit: I can't give a fixed "width" to inner div, because it changes every time (depending on the number of card images).
You need to give your #dealercards a width and margin:0 auto ;
#dealercards
{
display: block;
margin:0 auto;width:200px;
}
DEMO HERE
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.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
I have a div which is with absolute position (width/height are 100%).
Notice, not px, percents.
Inside this div I have an image. How do I center this image in this div?
CSS:
/* where margin-left = {img width}/2, and margin-top= {img height}/2 */
.bigdiv {
width:100%;
height:100%;
position:absolute;
}
.bigdiv img {
position:absolute;
left:50%;
top:50%;
margin-left:-10px;
margin-top:-10px;
}
HTML:
<div class="bigdiv"><img src="eg.png" /></div>
You could also put your margin-left, margin-top commands as a style on the img tag instead (since they're unique per image).