We can centering content of div block like this:
<div class="parent">
<form> <input type="text"/> </form>
</div>
css-style:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
It's ok to centering form here. JSFIDDLE. But if we add some margin to div.parent we lost vertical centering form. JSFIDDLE. Please explain me why it's occuring?
If you want to add a margin to your cell, try this code:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
input[type=text] {
margin: 20px;
position: absolute;
}
http://jsfiddle.net/markom/ZLLVu/3/
Remove position: absolute; and it works fine!
JSFiddle
Remove: position: absolute;
This is because position:absolute; forces display:block; and that is not what you want. you want it to remain display: table-cell;
If you want to center your container horizontally and vertically take a look here: http://jsfiddle.net/g4xfx/3/show/
.parent is also centered if you resize the browser window. The content, in your case the
form, is also horizontally and vertically centered within the parent container.
.parent {
position: absolute;
margin-top:-250px;
margin-left:-250px;
top:50%;
left:50%;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
display:table;
}
.parent form {
width:100%;
height:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
Related
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Why is btnow moved down? It should be inline with datewrap.
If I remove overflow:hidden from datewrap - it's ok.
But I need overflow:hidden on datewrap.
When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.
for fix use of vertical-align: top; like this:
.btnow {
vertical-align: top;
//Other css
}
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
vertical-align: top;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
text-align really shouldn't be used to position elements. There are far better ways to achieve this.
I don't know why overflow is causing it to "teeter-totter", but below is some code to fix this.
.wrap{
display: flex;
justify-content: center;
/* and if you want to make sure the elements are always aligned vertically */
align-items: center;
/* remember: justify-content will always control the same direction as the flex
** box; so, if the flex box is a row, justify-content will control the horizontal
** spacing and align-items will control the vertical spacing, but if the flex box
** is a column justify-content will control the vertical and align-items will
** control the horizontal. */
width: 100%;
position: fixed;
top: 45px;
left: 0;
background: gold;
}
.datewrap, .btnow {
margin: 0 5px;
display: inline-block;
border: 2px solid red;
}
.datewrap{
overflow: hidden;
}
.btnow{
color: white;
background: green;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
position:inherit;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Reference Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.wrap {
position: fixed;
left: 0;
top: 45px;
width: 100%;
text-align: center;
background: gold;
}
.datewrap, .btnow {
display: inline-block;
margin: 0 5px;
border: 2px solid red;
}
.datewrap {
overflow: hidden;
vertical-align: bottom
}
.btnow {
color: white;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Note:
If you are writing code in real-time, you need to minimize your CSS.
Im trying to center a box 200 by 200. I have tried using left:50% top:50% etc., but this is somehow not really working.
I created a fiddle to recreate my problem: https://jsfiddle.net/8k9o9Lvv/2/
I also tried to center the text from the top as well, with text-align:center and this is also not working.
Any ideas why this is not working?
HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
CSS
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
right:50%;
}
Just margin:0px auto; is enough
#container {
width: 100%;
}
.slider-text {
text-align: center;
margin:0px auto;
height: 200px;
width: 200px;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<div id="container">
<div class="slider-text">
<h2>Test
</h2>
</div>
</div>
Give the below code a try, centering the #container div horizontally, and the .slider-text div horizontally and vertically within #container.
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border:1px solid red; /* Creates a border around entire element */
margin: auto; /* Centers horizontally */
}
/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
text-align:center;
position: absolute; /* position: relative; works too */
width: 100%;
top: 30%;
left: 0%;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Let me know if it helps.
* {
margin: 0;
padding: 0;
}
#container{
position:relative;
width:100%;
height: 100vh;
}
.slider-text {
position: absolute;
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
right:50%;
display: flex;
align-items: center;
justify-content: center;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
You need to set the height of the container. In this case I used 100vh which is equal to 1 viewport height. transform: translateX(-50%) translateY(-50%); with top: 50%; left: 50% will make your .slider-text on center.
To center your text. You can use flexbox. Using display: flex will enable you to use align-items and justify-content. With value of center, it will allow your text to flow on center of its parent.
Your HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Modified CSS
#container{
width:100%;
}
.slider-text {
position:relative;
height:200px;
width: 200px;
border:1px solid red;
margin: 0 auto;
}
.slider-text h2 {
width: 100%;
text-align: center;
}
#container{
width:100%;
position: relative;
}
.slider-text {
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
position: relative;
}
/*since slider-text has a fixed height and width, a simple math would do*/
.slider-text h2 {
margin-top: 90px;
}
<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>
Just a simple calculation would do
You should set height:100% to all elements down to your container. That means:
html, body, #container
{
height:100%;
}
Then to center horizontaly and verically a known-size div inside your #container, you just need to set for that div:
left:50%;
top:50%;
and
margin-left:(MINUS whatever is the half of your div width)
margin-top:(MINUS whatever is the half of your div height)
UPDATED FIDDLE (sorry forgot to "update" it)
edit: i assumed you want to center it to the whole screen.
Assuming you want to center it both X and Y, you're right so far, however there are a few changes. Use this for your .slider-text class:
.slider-text {
text-align:center;
position:absolute; /* Relative was wrong */
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
Relative positioning was incorrect in this instance. absolute is correct. Relative would make it move X amount of pixels from its natural position, whereas absolute will position it in a specific place, relative to the closest parent with position: relative on it.
The transform basically does the same as negative margins, but you don't need to change the margin if the size of the box changes :)
Let me know if you have any questions.
Here is the css code:
.slider-text {
text-align:center;
position:absolute;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
margin-left:-(div width)/2;
margin-top:-(div height)/2;
I have two divs inside a div. One of the two is floated to the left and it has some links in it. It has a width of 200px The second of the two has a value of overflow:hidden and it has a width of rest to the right. It has some content in it which makes its height longer than first div.
I want first div to expand to parent's or the second div's height according to the increment of the second div's height
<div id ="main">
<div id ="first">
Link
Link
Link
Link
</div>
<div id ="second">
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div>
.
#main{
overflow:hidden;
border:1px solid black;
}
#first{
border:1px solid black;
width:200px;
float:left;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
}
JSFiddle
The solution for your problem is: first you have to give a height to the parent div and then set the height of the child, #first to min-height: 100%, the code would be like this:
#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}
You can use display: table; applied to the #main container and display:table-row; and display:table-cell; applied to #first and #second to make the first child container take the height of its sibling container #second. Remember to add overflow:auto; to allow the first container to make it expand its height until the bottom.
CSS
#main{
overflow:hidden;
border:1px solid black;
display:table;
width:100%;
}
#first{
border:1px solid black;
width:200px;
float:left;
display:table-row;
overflow:auto;
height:100%;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
height:400px;
display:table-cell;
width:100%;
}
DEMO http://jsfiddle.net/a_incarnati/djobkh7t/7/
I've removed the floats and changed the display types on your divs to fix the problem. See example CSS + fiddle:
#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}
http://jsfiddle.net/djobkh7t/13/
You can set the display type of 'table' on the parent div, then 'table-cell' on the child div's.
Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.
But the blue layout is overlay by pink layout. I need help on it.
div{
display:block;
}
#content{
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
<div id="content">
<div id="d" class="center">
<div class="center">
Click here to create new blue element
</div>
</div>
<div style="background-color:pink;width:100%;height:20px;"></div>
</div>
Check JSFiddle
Add some positioning and a z-index...
#foo{
position: relative;
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
z-index: 1;
}
DEMO
You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
position:relative;
z-index:100;
}
Can I suggest absolute positioning?
#foo{
position:absolute; // <-- here is the change
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
This, of course, is if I understand your question correctly...
What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code
http://jsfiddle.net/wbfTq/16/
div{
display:block;
}
#content{
position: relative;
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
position: relative;
background-color:#2060ff;
z-index:1px;
border: 1px solid #000;
width:50px;
height:50px;
}
Do let me know if this answers your question!
I have a div (#wrapper) containing 2 divs standing side by side.
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
Hope someone can help.
http://cssdesk.com/LWFhW
HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
You'll have no luck with floated elements. They don't obey vertical-align.
You need display:inline-block instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block; as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block does.
I recommend this:
Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
You can do this quite easily with display table and display table-cell.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
position: relative;
top: 50%;
transform: translateY(-50%);
A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
http://cssdesk.com/kyPhC