The one at https://css-tricks.com/centering-css-complete-guide/#both-fixed
There are hundreds of different things in there.
Open “Both horizontally and vertically”, and then “fixed width and height”. That’s the one.
1 Like
The example that they give there is:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
Where the -70 is half the 100 plus the 20 padding, and the -170 is half the 300 plus the 20 padding.
Can you show me how I input it into this, just as a template to go by.
It’s 1AM here. That’s a no.
I’ll wait then.
All I’m asking for is an example shown to me, that’s all.
But I don’t mind waiting.
Saturday morning I’m out signing papers to transfer ownership of a vehicle to someone else.
Saturday afternoon I’m being taken out to a board games day, featuring Brass.
Sunday I spend offline with a friend.
Monday is a public holiday, I’m most likely going to be putting together the vehicle I sold, so that it can be handed over.
Tuesday, is looking better.
That’s my current schedule.
ok, I’ll wait till Tuesday then.
You are currently in the JavaScript forum with a serious CSS issue. I recommend that this thread be moved over to the CSS forum. There are people there are much better placed to help you with this existing CSS issue of yours.
Welcome to the CSS forum, where they should be able to help apply the CSS vert/horiz centering technique from #146 to help with the issue that you’re having in https://jsfiddle.net/r7puqxno/19/
I was given this piece of code, but I don’t know how to use it.
Can someone show me how to use it with my code?
If I have an example to go by, a template if you will, that’ll help a lot.
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
<div id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
document.querySelector('#playButton2 .initial').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='inline-block';
document.querySelector('#playButton2 .play').style.display='none';
player.play();
} else {
playButton2.style.border='3px solid #e77d19';
playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
playButton2.style.backgroundColor = 'transparent';
playButton2.style.backgroundRepeat = 'no-repeat';
playButton2.style.backgroundPosition = 'center';
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}"onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .speaker').style.display='none';
document.querySelector('#playButton2 .pause').style.display='inline-block';
}"
onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">
<svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;" width="90" height="108" viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill="#1ed760 " fill-rule="evenodd"></path>
</svg>
<svg class="play" style="display: none;" width="90" height="108" viewbox="0 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
<audio id="player2" style="display:none;">
<source src='' type='audio/mpeg'></source>
</audio>
Topics merged.
1 Like
Thank you.
That code doesn’t have the working hover CSS red circle border.
I recommend that you make it easier for them to help you, with https://jsfiddle.net/r7puqxno/19/ and then when it is working, you can transfer over what works.
What is the current question?
3 Likes
It was using this piece of code, but figured out I could do it with just margin alone.
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
What if it contains, no text, no svg, no images, just plain. Is that allowed on buttons?
By “just plain”, do you mean an empty button tag?
<button></button>
How would you expect that to display, if it has no content? How would anybody know what it was for with no text to indicate its function?