I want to make a div which has two divs inside itself, and also I want to position them ALL in center using the margin:auto property. But it's not working properly. I've searched the web for this problem but I couldn't find a good answer. What have I missed?
<style>
body{
padding: 0px;
margin:0px;
}
.top{
padding: 0px;
margin:0px;
width:100%;
height:50%;
background-color: lightblue;
}
.top div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:200px;
height:200px;
background-color: red;
border-radius:20px;
}
.top div div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:100px;
height:100px;
background-color: red;
border-radius:20px;
}
</style>
to whom asked for html:
<body>
<div class="top">
<div>
<div>
</div>
</div>
</div>
</body>
Please update you following class. Please add positions to .top div {position:relative;} and update the .top div div class.
Html
<div class="top">
<div><div></div></div>
</div>
Css
body{
padding: 0px;
margin:0px;
}
.top{
padding: 0px;
margin:0px;
width:100%;
height:50%;
background-color: lightblue;
}
.top div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:200px;
height:200px;
background-color: red;
border-radius:20px;
position:relative;
}
.top div div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:100px;
height:100px;
background-color: red;
border-radius:20px;
vertical-align: middle;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Demo here
Related
I want the white circle above the inner circle. I can't see why the z-index doesn't work when the wrapper has a position relative and no z-index. I did something similar in a previous challenge on site css battle and it worked.
<div class="wrapper">
</div>
<style>
body{
display:grid;
place-content:center;
background-color:#191919;
}
.wrapper {
position:relative;
width: 100px;
height: 100px;
border-radius:50%;
background: #E08027;
overflow:hidden;
box-shadow: 0 0 0 30px #824B20;
}
.wrapper::before {
content:'';
width: 100px;
height: 50px;
position:absolute;
top:20;
left:-20px;
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
border: 20px solid #FFF58F;
border-top:0px;
z-index:5;
}
</style>
<div class="wrapper">
</div>
<style>
body{
display:grid;
place-content:center;
background-color:#191919;
}
.wrapper {
position:relative;
width: 100px;
height: 100px;
border-radius:50%;
background: #E08027;
box-shadow: 0 0 0 30px #824B20;
}
.wrapper::before {
content:'';
width: 100px;
height: 50px;
position:absolute;
top:20;
left:-20px;
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
border: 20px solid #FFF58F;
border-top:0px;
z-index:5;
}
</style>
I'm not sure if I understood your request but tell me if that helps when you remove the overflow: hidden; (try running the snippet above)
aligning divs between two divs
The two divs in between are not properly aligned with the two red divs on both sides.
I used “.menu:nth-child(2n){margin-top:-20px;}” as Monika suggested but still cannot get the result
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {margin-top:5%;
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
screenshot after removing the line
According to your code, they're not aligning because you have a margin-top for .main, just remove the line.
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
This can be achieved by using pseudo class, please check the css below
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.menu:nth-child(2n){
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border:1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width:50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}`
I'm developing ionic 2 app.
I'm looking to make profile picture in circle but it's not works fine.
I want it to be in the middle with border circle and white color.
html code
<div class="splash-info">
<div class="wrapper">
<img src="{{photo}}">
</div>
css code
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
position: relative;
width:100%;
height:auto;
transform: translate(-50%,-50%);
}
.splash-info {
position: relative;
z-index: 2;
margin-top: -64px;
margin-bottom: 30px;
text-align: center;
font-size:15px;
font-weight:bold;
}
Just remove the transform: translate(-50%,-50%); from the img css. I also removed the negative margin you had on splash-info just for the purposes of this demo(so that the image wouldn't be cut off at the top).
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
position: relative;
width:100%;
height:auto;
}
.splash-info {
background:#000;
position: relative;
z-index: 2;
margin-bottom: 30px;
text-align: center;
font-size:15px;
font-weight:bold;
}
<div class="splash-info">
<div class="wrapper">
<img src="http://placehold.it/128x128">
</div>
</div>
Solution, image position absolute inside parent: https://jsfiddle.net/209de4hu/
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
right:50%;
position:absolute;
}
.splash-info {
position: relative;
z-index: 2;
text-align: center;
font-size:15px;
font-weight:bold;
}
<div class="splash-info">
<div class="wrapper">
<img src="http://www.ricoh-imaging.co.jp/common/img/header-logo2_en.jpg">
</div>
</div>
I just want to keep display table for container and display table-cell for h1 (to get it vertically centered) and I want to put an arrow under the h1 and out of the red div
my code is :
.container{
display:table;
width:200px;
height:50px;
background-color:red;
text-align:center;
}
.h1{
display:table-cell;
vertical-align:middle;
}
.sub{
width: 0px;
height: 0px;
position: absolute;
margin: 0px auto;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid black;
display: inline-block;
}
<div class="container">
<h1> title 1 </h1>
<div class="sub"></div>
</div>
I think this way is a little better:
http://jsfiddle.net/es_kaija/dqjb6kqr/15/
<div class="container">
<h1> title 1 </h1>
</div>
.container {
display:table;
width:200px;
height:50px;
background-color:red;
text-align:center;
position: relative;
}
h1 {
display:table-cell;
vertical-align:middle;
}
.container:after {
top: 100%;
left: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 30px;
margin-left: -30px;
}
How do i vertical align the white box and green box inside red box. I want it look like in the picture below. Thanks you. guys are the best. here is http://jsfiddle.net/hamdlink/JxDn5/
<style>
*{
padding:0;
margin:0;
}
.box{
width:600px;
height:600px;
position: absolute;
margin:auto;
left:0;
right:0;
bottom:0;
top:0;
background: red;
}
.box2{
margin:0 auto;
background: green;
width:100px;
height:100px;
}
.box3{
margin:0 auto;
background: white;
width:100px;
height:100px;
}
.whole-background{
position: absolute;
width:100%;
height:100%;
background: rgba(0,0,0,.5);
}
</style>
<div class="whole-background"></div>
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
</div>
The red box should be used as a table-cell.
The 2 little boxes should be displayed in inline-block;
Horizontal alignment: text-align: center;
Vertical alignment: vertical-align: middle;
Result: http://jsfiddle.net/JxDn5/2/
*{
padding:0;
margin:0;
}
.box{
width:100px;
height:600px;
margin:auto;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0 250px;
}
.box2{
margin:0 auto;
background: green;
width:100px;
height:100px;
display: inline-block;
vertical-align: middle;
}
.box3{
margin:0 auto;
background: white;
width:100px;
height:100px;
display: inline-block;
vertical-align: middle;
}
.whole-background{
position: absolute;
width:100%;
height:100%;
background: rgba(0,0,0,.5);
}