In my code:
#lista1{
border:8px solid #EAF2F8;
height:auto;
float:left;
margin-right:18px;
border-radius: 15px;
border-style: double;
position: relative;
top: 20px;
text-align: center;
}
#lista2{
border:8px solid #EAF2F8;
height:auto;
float:left;
margin-right:18px;
border-radius: 15px;
border-style: double;
position: relative;
top: -20px;
text-align: center;
}
.botonera1{
float:left;
margin-right:30px;
position: relative;
top: 85px;
text-align: center;
}
#second{
color: black;
position: relative;
top: 5px;
padding-left: 33px;
}
#one{
color: black;
position: relative;
top: 45px;
padding-left: 33px;
}
fieldset {
border:1px solid #CACFD2;
}
body,td,th {
color: #FDFEFE;
}
legend {
color: black;
text-align: center;
}
ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100px;
}
li{ /* Styles of each element */
width:100px;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #85C1E9; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #5DADE2; /* background color of the right arrow*/
}
ul li a{
color: #444;
text-decoration: none;
font-size:15px;
}
ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
ul li:hover{
background: #EAF2F8; /* Background color on mouseover */
}
ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}<div id="demo-frame">
<h4 id="one">Tabla A</h4>
<ul id="lista1">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<div class="botonera1">
<fieldset>
<legend>Move rows</legend>
<input value=" « " onclick="moveRows(destTable,sourceTable)" type="button"></input>
<input value=" » " onclick="moveRows(sourceTable,destTable)" type="button"></input>
</fieldset>
</div>
<h4 id="second">Tabla B</h4>
<ul id="lista2">
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>I just want to center the title Table B in its corresponding table, I used the Padding-left and it does not work for me, can anyone help me?