# How do I center the logo on the main header?

**URL:** https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577
**Category:** Support
**Created:** [3월 22, 2018, 5:18오후 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577 "2018-03-22T17:18:53Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![BlackKnob](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blackknob/32/93549_2.png) [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [3월 22, 2018, 5:18오후 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/1 "2018-03-22T17:18:53Z")

</div>

I triad adding the following css, it didn’t work though.

.title {display: block; margin: auto;}

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [3월 22, 2018, 5:59오후 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/2 "2018-03-22T17:59:03Z")

</div>

Try this:

```
.navigation-topics .d-header .contents {
  text-align: center;
}
.navigation-topics .d-header .title {
  float: none;
  display: inline-block;
}

```

---

<div class="post-metadata">

### Author: ![BlackKnob](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blackknob/32/93549_2.png) [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [3월 22, 2018, 6:18오후 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/3 "2018-03-22T18:18:11Z")

</div>

Unfortunately, it didn’t work.

here’s a mockup of what I’m trying to do:

 ![Screenshot](https://global.discourse-cdn.com/meta/original/3X/2/e/2e42ff94a02ad6097f662a921ef58134d6e7b314.png)

and I would like to preserve centering when the logo changes to the small logo + topic title.

Can somebody enlighten me how to do it please?

---

<div class="post-metadata">

### Author: ![ZackFea](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zackfea/32/123509_2.png) [@ZackFea](https://meta.discourse.org/u/ZackFea)
#### Post date: [3월 29, 2018, 7:44오전 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/4 "2018-03-29T07:44:53Z")

</div>

This should work:

```
.d-header .title {
    float: none;
    text-align: center;
}

```

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [3월 29, 2018, 8:17오전 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/5 "2018-03-29T08:17:41Z")

</div>

Unfortunately that’s not enough to accomplish what the OP is asking for and has some adverse effects on the button panel without some additional CSS.

I played around with this for a little bit and haven’t come up with a cross-browser solution yet with pure CSS. The tough area is the centering when it switches to the small logo and topic title when scrolling down a topic. The structure of everything makes it pretty tricky.

The fiddling around I did made it look nice in an unmodified theme on desktop Safari, but Chrome and Firefox have issues. Here’s my rough, not fully working CSS just in case it gives anyone ideas or if anyone feels like building off of it:

```plaintext
.d-header {
    .contents {
        text-align: center;
    }
    .panel {
        float: none;
        position: absolute;
        display: inline-block !important;
        right: 0;
        text-align: initial;
    }
    .title {
        float: none;
        display: inline-block;
    }
    .extra-info-wrapper {
        display: inline-block;
        text-align: initial;
        transform: translateY(-5px); 
       
        .title-wrapper {
            width: 100%;
        }
        .topic-header-extra {
           position: absolute;
           top: 23px;
           margin-left: 65px !important;
        }
        .badge-wrapper.bullet {
            position: absolute;
            top: 25px;
        }
    }
}

```

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [3월 29, 2018, 11:04오전 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/6 "2018-03-29T11:04:27Z")

</div>

If you just want to change the main logo to center and aren’t worried about how it looks on a screen smaller than say, 1024x768 you could use the logo class:

Place this in the Desktop section of your theme and adjust the padding as neccessary

```plaintext
.logo-big {
    text-align: center;
    display: inline-block;
    float: none !important;
    padding-left: 49%;
}

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [7월 30, 2020, 8:15오전 UTC](https://meta.discourse.org/t/how-do-i-center-the-logo-on-the-main-header/83577/7 "2020-07-30T08:15:17Z")

</div>


