This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
Related
I'm trying to align some tiles that I have in my website to center. There are 4 tiles with two in the first row and other two in the second. I'm trying to align these DIVs to the center of the page but I'm not able to.
I've added margin: 0 auto; to the parent DIV and also included position: relative and display: inline-block; as suggested by some other posts but not able to align in yet.
Below is the code that I'm writing:
<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
</div>
The CSS Code:
.parent{
width: 1000px;
margin: 0 auto;
position: relative;
}
.child{
float: left;
margin: 2px auto;
width: 25%;
background-color: green;
position: relative;
display: inline-block;
}
.clear{
clear: both;
}
And the jsfiddle: http://jsfiddle.net/wj1a2fnj/4/
After all this I'm not able to align the child DIVs to the center. I'm a novice in CSS and figuring my way now. Any help will be greatly appreciated.
Thank you.
You need to remove float: left; from the .child and add text-align: center; to the .parent
div to center inline-block child elements inside it.
Try this - DEMO
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size:0; /* to remove the white space between inline-block elements */
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
font-size:16px; /* reset the font size (i.e 1em = 16px) */
}
You could also add a <br> tag instead of <div> tag after the second child - http://jsfiddle.net/p6rkw5ax/
Add text-align: center; to your parent div and it works
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size: 0; --> To make the space void in between divs
}
ADD
.child{
<--float: left;--> REMOVED
font-size: 14px;
display: inline-block; --> To make the div float next to each other
}
WORKING EXAMPLE
You could do something like this...
<div align="center">
<div>whatever you want to align</div>
</div>
Just make sure whatever you are aligning to center has a relative css position and not absolute or anything else...
DEMO
.parent{
width: 1000px;
margin: 0 auto;
list-style: none;
position:relative;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
}
text-align: center works
Just add it to your CSS for child class.
http://jsfiddle.net/wj1a2fnj/6/
EDIT:
The reason why its not aligning the parent div to the center is because you are using floats.
Remove the float and adjust margin: 0 auto and you will get what you want;
Updated Fiddle: http://jsfiddle.net/wj1a2fnj/19/
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
live: http://jsfiddle.net/8hAv3/
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
vertical-align: middle;
}
<div id="main">
<div id="sub">TEXT</div>
</div>
Why in this example vertical-align not working? How can i make it? I dont want use margin, padding and set height in px. Is this possible?
This should work:
#main {
width: 100px;
height: 100px;
background-color: red;
display: table;
}
#sub {
display: table-cell;
height: 100%;
width: 100%;
background-color: blue;
vertical-align: middle;
}
http://jsfiddle.net/8hAv3/2/
if you just want to vertically center text in a fixed height box I would use line-height:100px to do it
you have to use a
display:table-row;
display:table-cell; or
display:table;
along with the vertical-align style, not sure which exact display value it has to be but it needs to be one of the table ones.
You need to use display:table on the main container and display:table-cell on the child. Illustrated here: http://jsfiddle.net/8hAv3/1/
You have to give the element #sub a line height, otherwise the browser doesn't know how high it is to vertically align it.
Just give the div a line-height.
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
line-height:100px;
}
Fiddle
This solution does not use display:table and display:table-cell as display:table and display:table-cell are not browsers friendly, some older browsers do not support
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.