CODEWITHSUNDEEP
htmlcssalignment
KopiiPlays
KopiiPlays

Reputation: 13

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

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;
}

Upvotes: 1

Views: 33

Answers (3)

Kohaku
Kohaku

Reputation: 39

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>

Upvotes: 0

Hauke
Hauke

Reputation: 26

Maybe change

header img {
    padding-top: 0px;
}

to 

header img {
    padding-top: 30px;
}

?

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

Upvotes: 0

kunambi
kunambi

Reputation: 772

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
}

Upvotes: 1

Related Questions