Kaworu
Active Coder
Hi!
I am working on an element of a bigger page. I believe what's below is the complete minimal code of a solution, but it is not working.
Basically, I have created a table in CSS (display: table) and I want for this whole table to be 100% of the width. I also wanna for elements withing this CSS table to be centered both horizontally and vertically.
Currently, I have this:
As you see, the table is around 50% of width, not 100%. Also, the elements are centered left-right, but not up-down.
Below, in the spoiler section, you can find the complete source code.
I am working on an element of a bigger page. I believe what's below is the complete minimal code of a solution, but it is not working.
Basically, I have created a table in CSS (display: table) and I want for this whole table to be 100% of the width. I also wanna for elements withing this CSS table to be centered both horizontally and vertically.
Currently, I have this:
As you see, the table is around 50% of width, not 100%. Also, the elements are centered left-right, but not up-down.
Below, in the spoiler section, you can find the complete source code.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="style-exp.css">
<link rel="shortcut icon" href="../IMG/favicon-v2.png">
</head>
<body>
<div class"=table-businesscard">
<div class="table-businesscard-header">
<div class="center-both">
<div class="center2">
<h1>Header</h1>
<p>A paragraph</p>
</div>
</div>
</div>
<div class="table-businesscard-next">
<div class="businesscard-container">
<div class="center-both">
<img class="mySlides" src="IMG-personal/businesscard-front.png">
<img class="mySlides" src="IMG-personal/businesscard-back.png">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
</div>
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
CSS:
.mySlides
{
width: 100%;
height: 100%;
object-fit: contain;
}
.businesscard-container
{
position: relative;
width: 300px;
height: 200px;
margin-left: auto;
margin-right: auto;
/*
margin-top: auto;
margin-bottom: auto;
*/
}
.w3-button
{
position: absolute;
top: 50%;
}
.w3-display-left
{
position: absolute;
right: 100%;
}
.w3-display-right
{
position: absolute;
left: 100%;
}
.table-businesscard
{
display: table;
width: 100%;
}
.table-businesscard-header
{
display: table-cell;
width: 50%;
border-right: 5px solid black;
}
.table-businesscard-next
{
display: table-cell;
width: 50%;
background-color: red;
padding: 30px;
}
.center-both
{
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.center2
{
max-width: 49%;
}