Hi I haven't got the right concept about center div in nested divs.Here is my html .I want to center white background div.
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
and CSS
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
I tried to center div using text-align:center but it was not working.
and the output is here
.img {
...
left: 0;
right: 0;
}
fiddle: https://jsfiddle.net/ep9co5g5/
You can use left and translateX to center it since you are using position absolute,
you need to add this css to .img
left:50%;
transform:translateX(-50%);
see code snippet:
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
bottom: 0%;
margin-bottom: -50px;
left:50%;
transform:translateX(-50%);
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
left:0;
right:0;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
Ok, I'm setting up a mini-page and I want it to be 100% scalable so I'm trying to use only %.
But I don't get the "items" to take the 33% width and distribute is over the 80% of "content".
What am I doing wrong?
body, html{
width: 100%;
height: 100%;
}
.menu{
width: 20%;
height: 100%;
background: #fff;
float: left;
}
.content{
width: 80%;
height: 100%;
background: #eee;
float: left;
}
.bottom{
position: absolute;
bottom: 0;
}
.item{
width: 33%;
float: left;
}
.red{background: red;}
.blue{background: blue;}
.green{background: green;}
<div class="menu">menu</div>
<div class="content">content
<div class="bottom">
<div class="item red">left</div>
<div class="item blue">mid</div>
<div class="item green">right</div>
</div>
</div>
Try like this: Demo
.content{
position: relative;
}
.bottom{
width:100%;
}
.item{
box-sizing:border-box;
}
I want to center a fixed div inside its parent. The width of the fixed div should have the width of its parent. But it does not work, what is wrong?
js fiddle
HTML
<div class="container">
<div class="wrap">
<div class="center" >
centered
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 400px;
border:solid;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.wrap {
height: 800px;
width: 100%;
position: relative;
text-align: center;
}
.center{
background: red;
position: fixed;
bottom: 100px;
width: inherit;
}
change .wrap's width:
.wrap {
height: 800px;
width: inherit;
position: relative;
text-align: center;
}
I have a html markup like this
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div>outer content</div>
and css is
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
background: #eee;
}
Now for some reason I want to take out the child div (id=absolute) out of its parent (id=relative) while pushing down whatever content in below the parent div.
This is what I want to get,
any help is appreciated
Try this - http://jsfiddle.net/8eXEE/
HTML
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div style="background-color:#ff0000; width:400px; height:100px; position: relative; top:200px;">outer content</div>
CSS
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
bottom: 0px;
left: 0px;
width: 300px;
height: 200px;
background: #eee;
margin-bottom: -200px;
}
If your #absolute divs height does not dynamically changes (i.e. remains 200px always)
The markup
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div id="outer">outer content</div>
The CSS
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
top: 100%;
left: 0;
width: 300px;
height: 200px;
background: #eee;
}
#outer {
position:relative;
margin-top:200px;
background:blue;
}
Here is the plunker , you can play with it.