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.