Question: I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.

here is my code:

CSS:

```css
.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
img {
    padding: 0;
}
.list>a {
    display: table-cell;
    border-left:1px #47c9af solid;
    text-align: center;
    color:#47c9af;
    height:30px;
    text-decoration: none;
}
.container {
    background-color: white;
    color:#47c9af;
    height:100%;
    font-family: WYekan !important;
}

```

HTML: 

```
<div class="container">
    <ul class="list">
        <a href='#'><li style='float:left;'><img src="header2.png"></li></a>
        <a href=""><li></li></a>
        <a href='#'><li><h1 >Header Of My Blog </h1></li></a>
        <a href='#'><li><p>SubHeader</p></li></a>
        <a href='#'><li><h3></h3></li></a>
    </ul>
</div>

```

The result is something like this:

![enter image description here](https://i.stack.imgur.com/rrALE.png)

![enter image description here](https://i.stack.imgur.com/4unGT.png)

As you can see logo is not in order with other elements, what should i do?

Thanks.

Answer: 
First, let us rearrange your HTML, so the code is valid. A list (`ul`) has list-items (`li`). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.

Then we'll need to change the CSS a bit, so the anchors get the right color.

But the most important thing is the vertical alignment of the table-cells. By adding `vertical-align` to the list items, they'll be in the right alignment.

```css
.container {
    background-color: white;
    color:#47c9af;
    height:100%;
    font-family: WYekan !important;
}
.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
img {
    padding: 0;
}
.list>li {
    display: table-cell;
    border-left:1px #47c9af solid;
    text-align: center;
    height:30px;
    vertical-align: middle;
}
.list li a {
    color:#47c9af;
    text-decoration: none;
}
```

```html
<div class="container">
    <ul class="list">
        <li><a href="#"><img src="http://placehold.it/150x75" /></a></li>
        <li><a href="#"></a></li>
        <li><h1><a href="#">Header of my blog</a></h1></li>
        <li><a href="#">Subheader</a></li>
        <li><h3><a href="#"></a></h3></li>
    </ul>
</div>
```
You can define your `.list>a` and `img` tag `vertical-align:top;`

```
.list>a, img{
vertical-align:top;
}

```