Photoshop Question posted in
The official user guide can be found here.

Need assistance centralising an image in a list in my header? – Photoshop

I was just wondering how I would go about horizontally aligning all of the contents of the ul (unordered list) to the centre if that makes sense. As in instead of having their bottoms aligned, having their centres aligned.

Here is a photo of what it looks like currently: https://postimg.cc/S2YrpR24

Here is what I would like it to look like (Edited in photoshop): https://postimg.cc/N9YQT96G

My HTML for my header looks like this:

<header>
    <nav>
        <ul>
            <li><a>Contact Us</a></li>
            <li><a>Sign Up</a></li>
            <li><img id="logo" src="img/schule logo light.png" alt="mainlogo"></li>
            <li><a>Our Resources</a></li>
            <li><a>The Teachers</a></li>
        </ul>
    </nav>
</header>

and my css looks like this:

header{
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    color: #000000;
    padding-top: 10px;
    min-height: 110px;
    position: fixed;
    width: 100%;
}

header h1{
    font-weight: 600;
    margin: 30px 0px 0px 0px;
    color: #000000;
}

header a{
    text-decoration: none;
    font-size: 20px;
    color: #FFFFFF;
}

header img{
    padding-top: 0px;
    width: 40px;
}

header ul{
    text-align: center;
    padding: 15px;
    margin: 0px;
}

header li{
    display: inline-block;
    list-style: none;
    padding: 0px 30px 0px 30px;
}
Tags:

3

Answers


  1. 0

    Welcome to SO!

    This looks like a very good use for flexbox, a decent demo site:

    HEADER UL {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-align-content: stretch;
  align-content: stretch
}
    Login or Signup to reply.
  2. 0

    Maybe change

    header img {
    padding-top: 0px;
}

    to 

    header img {
    padding-top: 30px;
}

    ?

    Hard to say with that snippets. Or post an URL?

    Login or Signup to reply.
  3. 0

    Here is a working example using flex and vertically aligned items:

    <header>
    <nav>
        <ul>
            <li><a>Contact Us</a></li>
            <li><a>Sign Up</a></li>
            <li><img src="https://via.placeholder.com/200x100" alt="test image"></li>
            <li><a>Our Resources</a></li>
            <li><a>The Teachers</a></li>
        </ul>
    </nav>
</header>

<style>
    ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
    }
    li {
        display: block;
        flex: 0 1 auto;
        list-style-type: none;
    }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search