How do I center a
element?

Question

I have a quick question regarding some code i have here:

h1 {
    font - size: 65 px;
    color: orange;
    text - align: center;
    height: 20 px;
    font: Times;
}

h2 {
    text - align: center;
    font: Times;
}

ul {
    width: 1230 px;
    list - style - type: none;
    overflow: hidden;
    background - color: #C2C6DD;
    justify - content: center;
}

the h1 and h2 is the title of the webpage, which is centered. However th ul (navigation bar) is not centered I have tried many different tings like align-items, text-align, it always goes to the left of the page. Anybody can help to why?

enter image description here

You probably need to reset the default `padding` for `ul` elements as well. — I haz kode, Jul 30 '17 at 18:57
Also, when asking about CSS issues it would be good to show your HTML code too. — Oggy, Jul 30 '17 at 19:25
Possible duplicate of [Center

into div](https://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Rob, Jul 30 '17 at 20:11

score 0 · Answer 1 · answered Jul 30 '17 at 18:58

0

You try this code:

 ul{
  list-style-type:none;
  display:flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: #C2C6DD;
  text-align: center;
}

answered Jul 30 '17 at 18:58

Chandra Kumar

4,127
1
17
25

score 0 · Answer 2 · answered Jul 30 '17 at 18:59

0

Try adding margin: 0 auto; to the ul:

ul {
    width: 1230px;
    list-style-type: none;
    overflow: hidden;
    background-color: #C2C6DD;
    margin: 0 auto;
}

answered Jul 30 '17 at 18:59

nGAGE

177
1
11

score 0 · Answer 3 · answered Jul 30 '17 at 22:04

0

Try this out:

ul {
    width: 1230 px;
    list - style - type: none;
    overflow: hidden;
    background - color: #C2C6DD;
    justify - content: center;
    margin: 0 auto;
    text-align: center;
}

answered Jul 30 '17 at 22:04

How do I center a element?

3 Answers3

How do I center a
element?