Reputation: 4142
In my application I have a centered main div. Now I would like to get my logo halfway on top of the DIV. As shown in the picture:
I got this working, however, when my screensize changes, the image is located on the wrong place.
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top:0;
margin-top:5%;
position:absolute;
right: 50%;
}
.router-outlet {
flex: 1 0 100px;
background-color:blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
router-outlet + * {
height: 100%;
width: 100%;
}
}
I made a fiddle, can someone point me in the right direction?
https://jsfiddle.net/x78a3oyj/
Thanks in advance.
Upvotes: 0
Views: 407
Reputation: 22643
add transform3d the the child element
.img-on-top {
top: 0;
transform: translate3d(-50%, -50%, 0);
position: absolute;
left: 50%;/*change to left*/
width: 60px; /*set a width*/
background: hsl(106, 100%, 34%);
}
then on the parent element, set position relative
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
position: relative;/*add this*/
background: hsl(0, 100%, 50%);
margin-top: 3rem;
}
you here is the final code:
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
position: relative;
background: hsl(0, 100%, 50%);
margin-top: 3rem;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top: 0;
transform: translate3d(-50%, -50%, 0);
position: absolute;
left: 50%;
width: 60px;
height: 60px;
background: hsl(106, 100%, 34%);
}
.router-outlet {
flex: 1 0 100px;
background-color:blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
router-outlet + * {
height: 100%;
width: 100%;
}
}
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1
Reputation: 747
You can use this code - top image
body {
margin: 0;
}
.is-vertical-center {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
background-color: $color-ts-main-flat;
border: 1px solid $color-ts-main-border;
border-radius: 4px;
max-width: 30%;
padding: 20px;
}
.text-center {
text-align: center !important;
}
.img-on-top {
top: 10px;
margin-top: 0;
position: absolute;
right: 50%;
}
.router-outlet {
flex: 1 0 100px;
background-color: blue;
/* stretch element immediately following the router-outlet element within the same parent element.
* This is the element injected by angular (Assumption)
*/
}
.router-outlet+* {
height: 100%;
width: 100%;
}
<div class="is-vertical-center">
<div class="box">
<div class="text-center">
<img class="img-on-top" src="assets/logo.png">
</div>
<div class="router-outlet">
<div class="pure-g">
<div class="pure-u-1-1">
<h5>Start</h5>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-1">
<p>
Welcome Lorem ipsum
</p>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1