1

En mi codigo:

#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>

Tan solo quiero centrar el titulo Tabla B en su tabla correspondiente, he usado el Padding-left y no me funciona, ¿alguien que me pueda ayudar?.

1
  • ¿Qué es lo que has buscado/investigado sobre el centrado de títulos? ¿Ha revisado la documentación de MDN?
    – Rubén
    Commented el 4 ago. 2017 a las 17:50

1 respuesta 1

2

El elemento ya está posicionado de manera relativa. Cambiá padding-left por left, y ya.

#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;
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>

2
  • Gracias, me funciono, fijate que me agarraba por igual el padding-left, pero tenia que poner 320px y no es tan conveniente, existe una manera mas eficas de poner los tituos?
    – Reinos Ric
    Commented el 4 ago. 2017 a las 18:32
  • @ReinosRic tendrias que poner cada tabla dentro de un section y en los estilos por ejemplo: #second{width: 100%; text-alingn: center; }
    – Kevin
    Commented el 4 ago. 2017 a las 20:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.