How would this be done? https://jsfiddle.net/mLwcyj9u/
Can you help me?
I am trying to place the play image in the middle of the teal square.
That is all I am trying to do.
Place the play image inside the teal square.
Those are all the details.
That is everything.
I provided a snippet below.
.channel-tile {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
width: 180px;
float: left;
display: block;
margin-bottom: 18px;
background: #2E2E2E;
position: relative;
}
.channel-tile__image-area {
width: 180px;
height: 0;
padding-top: 100%;
position: relative;
z-index: 0;
border-radius: 4px;
background: red;
border: 1px solid blue;
}
.channel-tile__artwork {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 170px;
height: 170px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
background: teal;
}
.cover {
-webkit-appearance: none;
appearance: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 72px;
height: 72px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.cover::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
<div >
<div >
<span ></span>
</div>
</div>
<div >
</div>
CodePudding user response:
Simple, place your .cover
element inside the -area
and in CSS use position absolute (etc) just like you did for __artwork
.
.channel-tile {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
width: 180px;
float: left;
display: block;
margin-bottom: 18px;
background: #2E2E2E;
position: relative;
}
.channel-tile__image-area {
width: 180px;
height: 0;
padding-top: 100%;
position: relative;
z-index: 0;
border-radius: 4px;
background: red;
border: 1px solid blue;
}
.channel-tile__artwork {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 170px;
height: 170px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
background: teal;
}
.cover {
-webkit-appearance: none;
appearance: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 72px;
height: 72px;
border-radius: 50%;
cursor: pointer;
border: 9px solid blue;
background: transparent;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.cover::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid blue;
transform: translateX(4px);
}
<div >
<div >
<span ></span>
<div ></div>
</div>
</div>
Avoid using float
. Use flex
instead.