CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 133

Centering an unordered list

Have an image with a h2 that's centered to it, and want the list below it to also be centered. Been struggling for just over an hour now and don't seem to be getting anywhere with it. Any suggestions?

.images {
  display: inline-block;
  text-align: center;
  width: 33%;
  /* all ements align to the largest element within the div */
  vertical-align: top;
}

.images ol {
  width: 70%;
}

.images ol li {
  line-height: 1.2em;
  border: 0;
}
<div class="images">
  <h3>Panacotta Vanilla</h3>
  <img src="photo1.png.png">
  <p>recipe ingridients</p>
  <ol>
    <li>Macro free Ranged Chicken</li>
    <li>Cover chicken in almond meal</li>
    <li>Add cayenne pepper, chilli flakes, mixed herbs and paprika</li>
    <li>Cook until all pink of chicken disappears Salad
    </li>

  </ol>
</div>

Upvotes: 1

Views: 210

Answers (2)

slevy1
slevy1

Reputation: 3832

Run this in full page view for best results. 

.images{
    display:inline-block;
    text-align:center;
    width:33%;
    /* all ements align to the largest element within the div */
    vertical-align:top;

   
}

.images ol{
    margin-left:auto;width:100%;margin-right:auto;
}
.images ol li{
  text-align:left;
  margin-left:15%;margin-right:20%;
  line-height:1.2em;
  border:0;

}

   
   
<div class = "images">
		<h3>Panacotta Vanilla</h3>
				<img src = "photo1.png.png">
				<p>recipe ingridients</p>
				<ol id="mylist">
					<li>Macro free Ranged Chicken</li>
					<li>Cover chicken in almond meal</li>
					<li>Add cayenne pepper, chilli flakes, mixed herbs and paprika</li>
					<li>Cook until all pink of chicken disappears 
					Salad</li>

				</ol>
		</div>

Upvotes: 1

DMrFrost
DMrFrost

Reputation: 911

Change the position property of your div to absolute or relative. Then you should be able to position it. Then use margin: auto to put it in center.

position: relative;
margin: auto;

Adding this to your your css or

position: absolute;
left: 400px; //<!--Change this to position it manually-->

Upvotes: 0

Related Questions