0

I want all the items to be aligned neatly instead of them all being centered. For example in the first image they are all aligned neatly but not in the center of the div. When you center them they look like the second image. I want them to look the first image but centered in the div

uncentered image

centered image

.aboutMe{
    font-size: 1.3em;
    background-color: white;
    border-radius: 10px;
    width: auto;
    height: auto;
    margin: 30px 10px;
    padding: 0px;
    list-style-position: inside;

}
.aboutMe ul{
    width: 70%;
    margin: 0 auto;
    padding: 0px;
    background-color: #00CED1;
    text-align: center;
}
.aboutMe ul li{
    margin: 0 auto;
    background-color: red;

}
.aboutMe ul li ul{
    margin: 0 auto;
    font-size:  0.7em;
}
<div class="aboutMe">
<ul>
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
        <ul>
            <li>XHTML</li>
            <li>javascript</li>
            <li>CSS</li>
            <li>jquery</li>
            <li>Bootstrap</li>
            <li>PHP</li>
            <li>Mysql</li>
            <li>Swift</li>
        </ul>
    </li>
</ul>
</div>
user3856516
  • 31
  • 1
  • 7

3 Answers3

0

I gave your parent UL a id of "center" and text-align:center in your style.. it works.

    <div class="aboutMe">
<ul id="center">
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
        <ul>
            <li>XHTML</li>
            <li>javascript</li>
            <li>CSS</li>
            <li>jquery</li>
            <li>Bootstrap</li>
            <li>PHP</li>
            <li>Mysql</li>
            <li>Swift</li>
        </ul>
    </li>
</ul>
</div>

CSS

 #skills ul li {text-align: center;}.aboutMe{
    font-size: 1.3em;
    background-color: white;
    border-radius: 10px;
    width: auto;
    height: auto;
    margin: 30px 10px;
    padding: 0px;
    list-style-position: inside;

}
.aboutMe ul{
    width: 70%;
    margin: 0 auto;
    padding: 0px;
    background-color: #00CED1;
}
.aboutMe ul li{
    margin: 0 auto;
    background-color: red;

}

#center  {
  text-align:center;
}

.aboutMe ul li ul{
    margin: 0 auto;
    font-size:  0.7em;
}

Hope that helps

jack parker
  • 33
  • 7
  • list-style-position: never heard of it (CSS1) shame on me, great answer! –  Jan 13 '16 at 20:28
0

Here you go...it's a little complex way of doing it but it think this is the untended result.

* {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
}
.aboutMe {
  font-size: 1.3em;
  background-color: white;
  border-radius: 10px;
  width: auto;
  height: auto;
  margin: 30px 10px;
  padding: 0px;
  list-style-position: inside;
}
.aboutMe > ul {
  width: 70%;
  margin: 0 auto;
  padding: 0px;
  background-color: #00CED1;
}
.aboutMe ul li {
  background-color: red;
}
.aboutMe li#skills ul {
  font-size: 0.7em;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}
<div class="aboutMe">
  <ul>
    <li id="name">Name: Matt Muniz-Silva</li>
    <li id="age">Age: 23</li>
    <li id="skills">Programming Skills:
      <ul>
        <li>XHTML</li>
        <li>javascript</li>
        <li>CSS</li>
        <li>jquery</li>
        <li>Bootstrap</li>
        <li>PHP</li>
        <li>Mysql</li>
        <li>Swift</li>
      </ul>
    </li>
  </ul>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

Think this should work for ya. I had to change a few things around.

enter image description here

.aboutMe ul{
width: 70%;
background-color: red; 
}
.aboutMe ul li{   
background-color: red;
margin-left: 33%;
}
.aboutMe ul li ul{
margin-left: -7em;
font-size:  0.7em;
}