This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I am wondering how can I set line-height to be always equal to height of the container div - in order to center the element inside of the container in the middle of the height of the container.
Lets say I have a following:
<div style="height:12%">
<i style="line-height:??"></i>
</div>
How can I set line height, so that it changes with the changes when the height of the container div changes?
Thanks uksz
You put another inline-level element on the same line with a height equal to 100% of the container. It's most common to use display:inline-block; here, but any inline-level element to which height applies, such as inline-table, inline-flex or a replaced inline element will work just as well.
e.g div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
html, body { height: 900px; }
div { border:1px solid black; height: 12%; }
div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
<div>
<i>My text</i>
</div>
The intuitive way would be to set the line-height to 100%, but that actually just sets the line height to 100% size of the font
Assuming you probably want to center your text, try this
.container {
position:relative;
}
.center {
position:absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
/* for horiz left-align, try "margin: auto auto auto 0" */
}
Related
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(9 answers)
Closed 7 years ago.
I have very simple markup and style rules that should put my div in the middle of the page, but it does not (actually, the top of the div would be at the middle, not 100% truly centered vertically) when the viewport is of a small enough height.
HTML:
<div>adf</div>
CSS:
div {
background-color:red;
margin-top:50%;
}
You can look at my Fiddle to see this. It will require you shrink the rendered window (bottom right) a bit, as it is correct initially.
Instead of 50% try 50vh
50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.
Try replacing percentages with vh
div {
background-color:red;
margin-top:50vh;
}
<div>adf</div>
Here are more cool stuff about viewport sized measures
Here is another solution:
http://jsfiddle.net/nb6pq14v/
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
background: #abc;
height: 25px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
</div>
</div>
</div>
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
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 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).