Center div by specific item

Center div by specific item - javascript

Is it possible to center not the whole child-container div but by an specific item. The content of the first p and last p have different heights and can change dynamically.
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p>Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>

Give the child container a position of relative and the center paragraph absolute. Then give the center paragraph a margin top and bottom of 50vh:
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
position: relative;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
.center {
position: absolute;
margin-top: 50vh;
margin-bottom: 50vh;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>

Assuming you mean center horizontally, you just need to expand the child container with flex-grow and use align-self on your chosen child:
.container {
display: flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
flex-grow: 1;
align-items: flex-start;
}
.child-container * {
background-color: greenyellow;
}
.big {
line-height: 40px;
}
.bigger {
line-height: 80px;
}
.center {
align-self: center;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>

Related

all containers remove themselves instead of one at a time

Sorry, I repost the problem:
I want to remove a single container when their border right x become inferior to the border left x of their parent. It work fine with visibility hidden, but not with remove() as it remove all the containers.
Here the complete code of the problem...
Here is the JavaScript, for what the result is unexpected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
//container.style.visibility = "hidden"; // work fine
//container.style.display = "none"; // hide all the container
container.remove() // remove all the container
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>

If you remove() the most left container, the other contains will move over to fill the gap that is there by removing the previous containers.
When they move, they instantly match your if, and therefore they are removed them self.
Fix 1
Use justify-content: flex-end; on the .division so that the containers are aligned from the end of the box, so it won't overlap if you remove any of them. This way remove() will work as expected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.remove();
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
justify-content: flex-end;
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Fix 2
Using style.visibility = "hidden" is your best option, if you don't want to change the HTML/CSS to prevent the moving of the containers when you remove() one.
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.style.visibility = "hidden"; // work fine
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>

Responsive dotted lines among the images

I'm trying to create a responsive dots connecting among the images like below.
I'm able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?
Here is my code link:
https://jsfiddle.net/SampathPerOxide/q2yab607/29/
.dotted-line,
.dotted-line1 {
display: flex;
}
.over {
display: flex;
align-items: center;
justify-content: center;
}
.dotted-line::after {
content: ".......";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-left: 1px;
}
.dotted-line1::before {
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-right: 1px;
}
.top:before {
transform: rotate(90deg);
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
position: absolute;
top: 5em;
margin-left: 0.5em;
}
<div style="width:90px;margin:0px auto;">
<div style=" height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
" class="top">
<img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">
</div>
<br/><br/><br/>
<div class="over">
<div style="" class="dotted-line">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
<div style="">
<h4 style="text-align:center;padding:10px;">
Choose
</h4>
</div>
<div style="" class="dotted-line1">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
</div>
</div>

I would go for
display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots
* {
margin: 0;
box-sizing: border-box;
}
h4 {
padding: 1em;
}
.flex {
display: flex;
}
.flex.col {
flex-direction: column;
}
.flex.center {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.dots-h,
.dots-v {
flex-grow: 1;
background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}
.dots-h {
height: 1em;
background-repeat: repeat-x;
background-size: 10px 1em;
margin: auto 0;
}
.dots-v {
width: 1em;
background-repeat: repeat-y;
background-size: 1em 10px;
margin: 0 auto;
}
<div>
<div class="flex center">
<img src="https://picsum.photos/id/1/100/100">
</div>
<div class="flex center">
<img src="https://picsum.photos/id/2/100/100">
<div class="dots-h"></div>
<div class="flex col center">
<div class="dots-v"></div>
<h4>Choose</h4>
<div class="grow"><!-- Just a spacer --></div>
</div>
<div class="dots-h"></div>
<img src="https://picsum.photos/id/9/100/100">
</div>
</div>

Display divs in the row on small screens

I am trying to display these divs with flex. But when the width of the screen gets less then approximately 500px I see only one div on the row. How to keep 2 divs on the row when the width of the screen gets less than it was before?
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.wrapper {
margin: 20px;
background: beige;
border-radius: 15px;
}
.divla{
margin: 15px;
}
#media(max-width:500px) {
.box{
width: 50%;
}
<div class="box">
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
</div> `

Please use nowrap instead of wrap in flex-wrap property.
.box {
display: flex;
flex-wrap: nowrap;
align-content: space-between;
}
You can also remove flex-wrap: nowrap; from the class as nowrap is set by default.
.box {
display: flex;
align-content: space-between;
}

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.

.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

I can't click on a link in iDangerous Swiper and iScroll layout

I have a layout made with iDangerous swiper and iScroll.js and I've found that I can't make click on any link or submit button inside of that layout.
I have made a Codepen as an example: http://codepen.io/anon/pen/eNzMVX
This is the layout and the initialization of Swiper and iScroll:
$(document).ready(function () {
//initialize swiper when document ready
var mainSwiper = new Swiper ('#slideshow', {
// Optional parameters
direction: 'horizontal',
keyboardControl: true,
mousewheelControl: false,
grabCursor: true,
loop: false
});
var scrollSwiper = new Swiper ('#scroller--1', {
// Optional parameters
scrollbar: '',
grabCursor: true,
direction: 'vertical',
keyboardControl: true,
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true
})
});
html,
body {
height: 100%;
overflow: hidden;
position: relative;
}
.main-wrap,
.content {
height: 100%;
position: relative;
}
.bg--darkgrey,
.bg--grey {
color: #fff;
}
.bg--darkgrey {
background-color: #a9a9a9;
}
.bg--grey {
background-color: #4b4b4b;
}
.bg--radial-gradient-trans {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
background: -webkit-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
background: radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
}
.bg--radial-gradient {
background: -webkit-radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
background: radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
}
.bg--linear-gradient {
background: -webkit-linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
background: linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
}
.header__cover {
width: 100%;
height: 100%;
min-height: 200px;
text-align: center;
position: relative;
background-size: cover;
}
.header__cover h1,
.header__cover h2,
.header__cover h3,
.header__cover p {
color: #fff;
}
.header__cover h1,
.header__cover h2,
.header__cover h3 {
text-transform: uppercase;
}
.header__cover--content {
top: 50%;
z-index: 2;
width: 100%;
padding: 1em 1.5em;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.page__slide--1 {
background-color: #f00;
}
.page__slide--2 {
background-color: #008000;
}
.page__slide--content {
width: 100%;
min-height: 200px;
}
.swiper-container {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.page__slide--content a {
color: #fff;
}
<div class="main-wrap">
<div class="content">
<div id="slideshow" class="swiper-container">
<div class="swiper-wrapper">
<article class="swiper-slide page__slide--1" id="home">
<div class="swiper-container" id="scroller--1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 1</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide" style="background-color: blue;">
<div class="page__slide--content">
Google
</div>
</div>
</div>
</div>
</article>
<article class="swiper-slide page__slide--2" id="empresa">
<div class="swiper-container" id="scroller--2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 2</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide">
<div class="page__slide--content"></div>
</div>
</div>
</div>
</article>
</div>
<!-- .slideshow__container -->
</div>
<!-- #slideshow -->
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Center div by specific item - javascript

Related

all containers remove themselves instead of one at a time

Responsive dotted lines among the images

Display divs in the row on small screens

Flexbox grow inside anchor

I can't click on a link in iDangerous Swiper and iScroll layout

Categories

Resources