Truly Center Text Inside of Div [duplicate] - html

Question

This question already has answers here:
How do I vertically align text in a div?
(34 answers)
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I've looked at several posts here on stackoverflow and can't find an answer that solves my issue. The issue appears to be the same as many other questions, with the simple difference that I am trying to center text that will change and I want it perfectly centered.
Below is a a basic example of what I have currently; the text on the bottom is centered between the text on the left and right, where as the text on the top is centered in the DIV. The text on the bottom should reflect the same.
I have tried a multitude of solutions, from display: inline block (which decreases my spacer width) to margin: 0 auto, all the way to converting the containing div to display: table-cell, vertical align middle.
Any help will be greatly appreciated!
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
.left { float: left; }
.right { float: right; }
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
EDIT
This post is not able to use the answers utilized in both related questions; though they are similar in nature, setting a specific width for my LI elements to achieve perfect center is not possible with pure CSS (SCSS maybe but not CSS3). The display: table answer did not work for me. Hence the reason I asked it as a new question; I tried 15 different suggested answers before posting my question.

Answer 1

I would put the 3 links in the footer in a single ul, use display: flex on the ul, and flex: 1 0 0 on the li's so they'll take up the same amount of space, then use text-align in each li to position the text.
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide,
li {
display: none;
}
.active {
display: block !important;
}
.header {
text-align: center;
}
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus {
text-align: center;
}
/* new stuff */
.bottom {
display: flex;
}
.bottom li {
flex: 1 0 0;
}
.bottom li:first-child {
text-align: left;
}
.bottom li:last-child {
text-align: right;
}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="bottom">
<li class="active left">ASDF</li>
<li class="active left">LKJHGFDSAPOIURTQAJK</li>
<li class="active left">POV - ASR</li>
</ul>
<div class="spacer"></div>
</div>
</div>

Answer 2

If you don't want your left and right items to effect the positioning of the center item, you can take them out of the flow by using position: absolute;.
With this in place, you can align them using left or right.
ul.left, ul.right {
position: absolute;
}
ul.left {
left: 0;
}
ul.right {
right: 0;
}
Working example:
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
ul.right {position: absolute; right: 0;}
ul.left {position: absolute; left: 0;}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
I've removed your float properties because with this implementation, they are no longer necessary.