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.
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>
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>
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 want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I would like to have a layout as follows:
Whereby I have a parent container, and centred inside of that is a breadcrumb. However, I also would like a logo inside of the container which floats to the left of the breadcrumb, but respects the boundaries of the breadcrumb.
I have been playing around with flexbox and can only get it to work with absolutely positioning the logo, which means the breadcrumb does not respect the boundaries of the logo.
I have put together a JSFiddle playground here: https://jsfiddle.net/joyqwpc1/25/.
The difficult thing is, the logo can be a variable width, so setting a margin is not viable for this.
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 50px;
}
#logo {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
I've created 2 separate containers for the logo and breadcrumbs and set them a width. Then, I aligned elements inside these containers.
https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/
<div id="container">
<div class="logoContainer">
<div id="logo">
</div>
</div>
<div class="breadcrumbContainer">
<div id="breadcrumb">
</div>
</div>
</div>
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
}
.logoContainer{
width: 10%;
height: 100%;
background: yellow;
}
#logo {
height: 50px;
width: 100%;
background-color: blue;
}
.breadcrumbContainer{
width:90%;
display: flex;
justify-content: center;
}
#breadcrumb {
width: 200px;
max-width: calc(100% - 2rem);
height: 20px;
background-color: green;
}
For clean solution a little bit of JavaScript is needed:
Make sure to click "Run with JS" button: https://jsbin.com/ziziqidole/edit?html,output
<html>
<head>
<script>
function handleResize() {
var crumb = document.getElementById("breadcrumb");
var logoWidth = document.getElementById("logo").offsetWidth;
var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
if (calcWidth < 10) {
calcWidth = 10;
}
crumb.style.marginLeft = calcWidth;
}
</script>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body onresize="handleResize()" onload="handleResize()">
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
Solution without JavaScript. But some hardcoding needed e.g. logo width and crumb width.
https://jsbin.com/juxijowova/edit?html,output
<html>
<head>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
position: absolute;
left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
transform: translate(-50%, 0);
/*margin: 0 auto;
margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body>
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
This is usually how I lay something like this out: 3 containers, the side 2 will flex to fill space equally because they have the same exact basis (auto basis would break this because the left "Logo" content would be included in the basis for the left container). The middle is sized to the content and stays centered unless it becomes too wide and will start to take up space on the right and become uncentered.
.f-row {
display: flex;
}
.left-box {
flex: 1 1 0.0000001px;
padding: 1em;
border: 1px solid blue;
}
.middle-box {
padding: 1em;
border: 1px solid red;
justify-self: center
}
.right-box {
padding: 1em;
border: 1px solid green;
flex: 1 0 0.0000001px;
}
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
<div class="right-box"></div>
</div>
At the moment, they aren't equal:
<div class="homescreen-content" scroll="false">
<h2>Top</h2>
ITEM 1
<hr>
<h2>Bottom</h2>
ITEM 2
</div>
I want to split the screen equally, and want it to be responsive and centred.
Is there a way to do it with SplitPane?
.homescreen-content {
height: 100%;
display: flex;
}
.split {
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.test1 {
left:0;
height: 55%;
width: 100%;
background-color: $white-love;
border-bottom: 2px solid;
}
.test2 {
left:0;
top: 55%;
height: 50%;
width: 100%;
background-color: $white-love;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
This is may work:
<div class="homescreen-content" scroll="false">
<div class="split test1">
<div class="centered">
<h2>TEST1</h2>
</div>
</div>
<hr>
<div class="split test2">
<div class="centered">
<h2>TEST</h2>
</div>
</div>
</div>
You can do it with the Flexbox:
body, hr {margin: 0}
.homescreen-content {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100vh; /* 100% of the viewport height */
}
.homescreen-content > div {
display: flex;
justify-content: center; /* horizontally centered */
align-items: center; /* vertically centered */
flex: 1; /* each stretches and takes equal height of the parent (50vh) */
}
<div class="homescreen-content" scroll="false">
<div>ITEM 1</div>
<hr>
<div>ITEM 2</div>
</div>
Try this html and CSS
body , html {
height: 100%;
}
.container {
height: 100%;
}
.upper {
border-bottom: 2px solid;
height: 50%;
}
.lower {
height: 50%;
}
<div class="container">
<div class="upper">
<h2>Top</h2>
ITEM 1
</div>
<div class="lower">
<h2>Bottom</h2>
ITEM 2
</div>
</div>
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/