Codecademy Forums

List in Between Two Images

I am having trouble aligning a list in the middle of two images using CSS. Here is part of the HTML code I am having trouble with.

<div class="philosophy">
<h1> My Professional Philosophy</h1>

/*image has to go here*/

<ul>
<li> Understand how technology & society interact </li>
<li> Look at mistakes as learning opportunities</li>
<li> When working on web projects, put yourself on the user's shoes</li>
<li> Always look for ways to learn and grow </li>
<li> Reseach for inspiration </li>
<li> Design many prototypes or examples </li>
<li> Be observant for areas that need improvement </li>
<li> Think critically about tech - research, analyze, discuss</li>
<li> Never discard ideas </li>
<li> Always put more than 100%in your work!</li>
</ul>

/*image has to go here*/

</div>

Define in the middle. As in horizontally, vertically? What is it you want to achieve?

3 Likes

I am making my own website, and in this part of the html, I am just briefly introducing ideas. Yes, I would like them to be horizontal. Attached is the wireframe for the page. It is under the title “My Professional Philosophy” (the images do not have to be tilted as shown).

Use the align=“center” feature right in the tag.

<ul align="center">
  <li>Goods</li>
</ul>

Moves everything to the center exempt for the bullet point :rofl:, but it works.

If you just want simple CSS, here it is to center the list:

ul {
  text-align: center;
}

Same thing with the dot on the very left though. I don’t think there is a solution using that tag to fix it.

I hope this helps =)

P.S. You pust your list there instead of goods

3 Likes