I can not center the text

Navigation
2

I just got this css text animation on hongkiat.com:

link

I can not centralize the text at all. I put display: block, text-align: center, position: relative and margin: auto in everything, but does not center. I put a yellow background in the div so I can see better. 

.content {

  position: relative;
  top: 110px;
  display: inline-block;
  margin: auto;
  text-align: center;
  font-size: 2.5em;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  height: 160px;
  overflow:hidden;
}

.visible {
  background-color: yellow;
  overflow:hidden;
  height:60px;
  position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;


  
  &:before {
    content:'[';
    
    line-height:60px;
    display: inline-block;
    text-align: center;
    margin: auto;

  }
  &:after {
    content:']';
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;

   
    line-height:60px;
  }
  &:after, &:before {
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;
    top:0;
    color:#16a085;
    font-size:60px;

    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;

  }
}

.visible p {
	position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;

}

.visible ul {
	position: relative;

  text-align:center;
  list-style:none;
  display: inline-block;
  margin: auto;

  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.visible ul li {
	position: relative;
  color: #2ba2df;
  line-height:60px;
  margin: auto;
  display: block;
  text-align: center;

}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}
<div class="content">
  <div class="visible">
      <ul>
      <li>Web Design</li>
      <li>Graphic Design</li>
	  <li>Motion Graphics</li>
	  <li>Photography</li>	
      </ul>
   </div>
</div>
    
asked by anonymous 08.01.2017 / 01:50

3 answers

1

Just set padding to ul to 0px . See below the result: 

.content {

  position: relative;
  top: 110px;
  display: inline-block;
  margin: auto;
  text-align: center;
  font-size: 2.5em;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  height: 160px;
  overflow:hidden;
}

.visible {
  background-color: yellow;
  overflow:hidden;
  height:60px;
  position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;


  
  &:before {
    content:'[';
    
    line-height:60px;
    display: inline-block;
    text-align: center;
    margin: auto;

  }
  &:after {
    content:']';
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;

   
    line-height:60px;
  }
  &:after, &:before {
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;
    top:0;
    color:#16a085;
    font-size:60px;

    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;

  }
}

.visible p {
	position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;

}

.visible ul {
	position: relative;
  padding: 0;
  list-style: none;
  text-align:center;
  display: inline-block;
  margin: auto;

  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.visible ul li {
	position: relative;
  color: #2ba2df;
  line-height:60px;
  margin: auto;
  display: block;
  text-align: center;

}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}
<div class="content">
  <div class="visible">
      <ul>
      <li>Web Design</li>
      <li>Graphic Design</li>
	  <li>Motion Graphics</li>
	  <li>Photography</li>	
      </ul>
   </div>
</div>
    
08.01.2017 / 02:10
2

Places in ul this: 

padding: 0;
list-style: none;
    
08.01.2017 / 02:00
0

I put padding in ul and apparently centered here. 

.visible ul {
        padding: 10px 25px;
    }
    
08.01.2017 / 02:02
SELECT Multiple Date Range in MySQL Background does not work