This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 4 months ago.
I want to position a div at the center of the screen. The issue is when the div is small, from left 45% looks fine but when the div is longer(ie more width), I need to make it from left 30%
Is there a smart way to position the div at the center based on the size of div.
body {
background:blue;
}
.box {
position: absolute;
top:10px;
left:30%;
background:white;
padding:10px;
border-radius:10px;
}
<div class="box">
This is long div so need left = 30 percent
</div>
You can align center the component using display: flex; attribute.
css flex
body {
flex: 1;
background:blue;
display: flex;
justify-content: center;
}
.box {
position: absolute;
top:10px;
background:white;
padding:10px;
border-radius:10px;
}
<div class="box">
This is long div so need left = 30 percent
</div>
You can center it horizontally that way:
.box {
position: absolute;
top:10px;
left:50%;
background:white;
padding:10px;
border-radius:10px;
transform: translateX(-50%);
}
to center a div horizontally, a simple solution is to set its margin to "auto":
body {
background:blue;
}
.box {
width: fit-content;
margin: auto;
background:white;
padding:10px;
border-radius:10px;
}
Related
This question already has answers here:
Keep div at the bottom of another div - css
(5 answers)
Closed 4 years ago.
I have a question for those frontend people out here:
How do I position a div at the bottom of its parent?
In my body-tag, which is for example 100px tall, I have a div, which is 10px tall.
How can I now make the div go to the bottom of the body tag, instead of going to the top?
I seriously can't figure that out!
Greetings
Alex
Its pretty easy, this is how you do it.
First you define position: relative to parent
Second you define position: absolute to child
Using top, left, right, bottom you can position child element where you want.
.parent {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #ccc;
}
.child {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
background-color: #000;
}
<div class="parent">
<div class="child">
Example text
</div>
</div>
Like that:
div{
background-color:red;
width:100px;
height:300px;
position:relative;
}
div > div{
background-color: blue;
width:100px;
height:100px;
position:absolute;
bottom:0px;
}
<div>
<div>
</div>
</div>
This question already has an answer here:
Centering text vertically and horizontally in a div
(1 answer)
Closed 5 years ago.
I have a popup div that needs to be centered and width responsive (fluid), but I'm using the common code with left 50% and negative margin left
width: 960px;
margin-left: -480px;
position: absolute;
top: 20px;
left: 50%;
z-index: 999;
but can I make it responsive, say if i want to have
max-width: 960px
instead of a absolute value?
update: maybe i wasn't clear but i don't see any relation with the question "Centering text vertically and horizontally in a div "
On absolute elements, you can use
left: 0
right: 0
margin: 0 auto
Hope this helps!
.popupContainer{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}
.popup{
background-color:#ccc;
width:300px;
height:300px;
}
<div class="popupContainer">
<div class="popup">
</div>
</div>
You could utilize flexbox for this such as this codepen: https://codepen.io/andrasadam93/pen/YrrORq
.popupContainer{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}
.popup{
background-color:#ccc;
width:300px;
height:300px;
}
<div class="popupContainer">
<div class="popup">
</div>
</div>
You can try this:
Using transform:translate
CSS
width: 960px;
position: absolute;
top: 20px;
left: 50%;
transform:translateX{-50%}
z-index: 999
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How can we center (horizontally and vertically) the text in this div?
HTML
<div class="text">
hello is the the testhello is the the testhello is the the testhello is the the testhello is the the testhello is the the
testhello is the the tes
</div>
CSS
.text {
width:150px;
background:red;
float:left;
height:150px;
margin:10px;
text-align:center;
word-wrap:break-word;
overflow:hidden;
color:white;
}
Here is the full explanation here. Read this.
http://css-tricks.com/centering-in-the-unknown/
If you want to vertical & horizontal center to unknown height, width element. you must add the style for parent as display:table and the style for child as display:table-cell.
//UPDATED
if you know the height & width of the element.
Try this.
.parent {
display:block;
position:relative;
}
.child {
display:block;
height:x;
width:y;
position:absolute;
top:50%;
left:50%;
margin-top:-x/2; //Half of the height with minus direction
margin-left:-y/2; //Half of the width with minus direction
}
Example on codepen: http://codepen.io/anon/pen/BFqfx/
div {
width:150px;
height:150px;
line-height: 150px;
background:red;
color: #fff;
}
div p {
display: inline-block;
vertical-align: middle;
line-height: normal;
width: 100%;
text-align: center;
}
Screenshot
DEMO
HTML
<div class="foo">
<div class="bar">
Unknown stuff to be centered.
</div>
</div>
CSS
.foo{
display: table;
width: 100%;
}
.bar {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Article
There is another common technique, based upon "absolute positioning" and negative top margin.
HTML:
<div class="foo">
<div class="bar">
Unknown stuff to be centered.
</div>
</div>
CSS:
.foo{
width:150px;
height:150px;
background:red;
position:relative;
}
.bar {
text-align: center;
position:absolute;
top:50%;
height:40px;
margin-top:-20px;
border:solid 1px blue;
}
The idea is that you move down to 50% from the top the inner div, and then push it up of half its height with negative margin-top.
Is very stable and cross-platform, the only constraint is you must know height of inner div.
To avoid this costraint, a workaround is replacing negative margin-top with a transform: translateY(-50%);. In this case, negative translation to center DIV is obtained visually with CSS transformation.
It's useful because in this way you can use it without knowing height of inner DIV, but remember that transformation are extracted from DOM rendering.
This question already has answers here:
DIVs Arrangement - HTML CSS
(3 answers)
Closed 9 years ago.
I am trying to make two divs in the main container side by side, with bottom div should adapt to the width of the rest of the space.
<div id="container">
<div id="left">fixed width</div>
<div id="right">rest of space width</div>
</div>
#container {
float:left;
width:100%;
}
#left, #right {
padding:50px;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
padding:20px;
background:#000;
color:#fff;
}
I'm stuck at this stage http://jsfiddle.net/Z9qW3/7/
#container
{
overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}
Try This Code:
Demo
css
#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}
html
<div id="container">
<div id="left">fixed width</div>
<div id="right">rest of space width</div>
</div>
Hope this would help...
#container {
width: 100%;
}
#left {
padding: 50px;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
float:left;
}
#right {
padding-top: 20px;
padding-bottom: 20px;
background:#000;
color:#fff;
width: 79%;
float: right;
}
What i can get from your question is you want a fixed div on left side and the other div should take the remaining space on right and on the bottom of left div. I think a better approach would be to make a single big div and then float a fixed div on left and then you can use the remaining portion to position individual elements with css positioning property
This question already has answers here:
Setting width/height as percentage minus pixels
(11 answers)
Closed 9 years ago.
I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?
Here is the fiddle that I've created: http://jsfiddle.net/muGty/
Basically I want blue div (right ) to occupy rest of the grey container completely.
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Do you mean like this?
<div id="left">
</div>
<div id="right">
</div>
CSS
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
margin-left: 200px;
background: #0f0;
height: 100%;
}
Update:
You can also use calc() property in CSS3, which will ease up this process like
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
float: left;
background: #0f0;
height: 100%;
width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}
Demo 2
Just change your right div to this:
.right{
float:left;
height:50px;
width: calc(100% - 50px);
background-color: blue;
display:inline-block;
}
You could add a 50px margin to right and float it.
What about editing your right class to make it look like this :
.right{
float:left;
height:50px;
width: 100%;
margin-right:-50px;
background-color: blue;
display:inline-block;
}
You could also work with an absolute position for the right side column. Consider this example:
.parent{
width:100%;
height:50px;
background:#888;
position:relative
}
.left{
float:left;
height:100%;
width:50px;
background:green
}
.right{
background:red;
position:absolute;
bottom:0;
left:50px;
right:0;
top:0
}
Also see this Fiddle. Note that you would need to set position: relative on the parent container for this to fly.