Align text for UL and LI

1

Hi; somehow managed to get the text in center; but the result looks bit ugly; if someone can assist pls.

<body  class="white-background">

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
    font-size: 27px;
    text-align: center;
    padding: 10px;
    background-color: rgba(45, 45, 45, 0.1);
  }

  p {
    font-size: 16px;
    font-family: sans-serif;
    
  }

  .smaller-image {
    width: 100px;
    
  }

  .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.thick-green-border {
    border-width: 4px;
    border-color: green;
    border-style: solid;
    border-radius: 45%;    
  }

.white-background {
    background-color:white;
  }

#cat-photo-form {
    background-color:yellow;
  }

.grey-box {
    background-color:rgb(255,255,0.2);
    color: #fff;
  }

.myDiv  {
	text-align: center;
	
.ul { 
	display: inline-block; 
	text-align: left; 
	}
.li {
      display: inline-block; 
	text-align: left;
      }

}

</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a></p>

  <a href="#"><img class="center smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="myDiv">
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" class="grey-box" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

</body>

image
image1414×636 42.8 KB

2

Uhmm, interesting. Inline-block elements, in terms of text-alignment, can be thought as a words in a paragraph. div {text-align:center} is centering this ‘word’ (the ul).

Now, that’s fine, but there is a nicer way. Give the ul this styling:

ul{
/*display:inline-block; remove this line */
width:40%;
margin:auto;
list-style-type:none;
}

and the lis

ul li {
display:block;
padding:0.4rem;
text-align:left
}

That’s just a starting point. Feel free to host your page over on codepen.io
which will improve your skills.

And if you like, add a text-decoration:underline; to the title.

1 Like
3 
<ul>
        <li>Text</li>
<ul>

<style>
ul li {
width:500px;
text-align:center;
}
</style>