text-align center in
element

Question

body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
    background-color: blue;
}

<div class="header"> 

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> 1.0 Main Menu </li>
          <li> 2.0 Main Menu </li>
          <li> 3.0 Main Menu </li>
        </ul>
      </nav>
      
</div>

With the above code I have created a <header> containing of an <image> and a <navigation>. All this works fine so far.

Now I want that the text inside the <li> element appears in the center. Therefore, I tried to go with the property text-align: center; in the li CSS but it did not work.

What do I have to change in my code to get the text within the <li> elements centered?

You can also find my code here: https://jsfiddle.net/5jv8m5xf/39/

Did you try adding "text-align: center" to your "
" element? — arifCee, Aug 20 '17 at 14:08
https://stackoverflow.com/questions/33049010/how-to-center-text-in-li — Sven van den Boogaart, Aug 20 '17 at 14:15
I have tried use the `text-aling:center ` and its works. I was not able to see the effect because the

Daniel Beck · Accepted Answer · 2017-08-20T15:15:09.510

text-align:center does center the text -- but you have to set a specific width for the li elements; otherwise each of them just collapses to the width of the text itself, so the centering isn't visible.

li {
  width: 100px; 
  text-align:center;
}
/* Everything below is the same as your original code */
body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue; 
}

<div class="header"> 

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> Longer text</li>
          <li> Short </li>
          <li> X </li>
        </ul>
      </nav>
      
</div>

If you want vertical centering as well, there are a bunch of techniques -- the quickest and dirtiest would be to either add some padding-top to the li elements, or set a line-height that matches the height of the element as a whole.

But a cleaner solution for this particular design would probably be to switch over to flexbox; the code is a bit simpler and it solves the layout problems that occur when the text within a li wraps over multiple lines:

.header {
  background-color: yellow;
  display: flex;
  justify-content: space-between; /* Puts the image at far left, nav at far right */
}

.image {
  width: 100px;
  background-color: green
}

ul {
  display: flex; /* Puts the `li` in a row */
  list-style: none; margin: 0; padding: 0;
  background-color: blue;
  height: 100px;
}

li {
  border: 1px solid;
  width: 100px; /* Alternatively, you could set a specific width on the ul, and use flex-grow:1 here to make all the li elements the same width */
  display: flex; /* allows align-items to work below */
  justify-content: center; /* Horizontally centers single-line elements */
  text-align:center; /* Horizontally centers text within line-wrapped elements */
  align-items: center; /* vertical */
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li>Very long text with line wrapping</li>
      <li>Short</li>
      <li>X</li>
    </ul>
  </nav>
</div>

Hi Daniel, thanks for your answer. It seems to work only for the vertical-align. What do I have to change to also make it work horizontally? — Michi, Aug 20 '17 at 14:31
Right now the text is centered horizontally but not vertically. There are a number of different techniques for vertical centering; the ones that would require the least amount of changes to your existing code would be to either add some `padding-top` to the `li` elements, or set a `line-height` that matches the height of the element itself. — Daniel Beck, Aug 20 '17 at 14:37
But both of those are a bit hacky. Honestly if I were aiming for this design I'd start over and do it in flexbox, unless you need to support very outdated browsers. Give me a sec and I'll throw together an example. — Daniel Beck, Aug 20 '17 at 14:39
Hi Daniel, sorry. Yeah I meant vertcially. I tried the line-height. It would bring me to my goal but I guess a flexbox solution might be another modern approach to it. Looking forward to your example. — Michi, Aug 20 '17 at 14:48
@Michi updated. I set a specific width on the `li` elements in the flexbox version too; depending on your design you could alternatively set a width for the `ul` instead and use `flex-grow:1` on the `li` to let them set their own equal sizes within that area. — Daniel Beck, Aug 20 '17 at 15:04
Briliant solution. Thanks a lot for your help. I also updated it here: https://jsfiddle.net/vu0hnqab/1/ — Michi, Aug 20 '17 at 15:22
Maybe you also have a solution for this: https://stackoverflow.com/questions/45796019/jquery-slide-menu-appearing-below-main-menu — Michi, Aug 21 '17 at 11:31

kukkuz · Answer 2 · 2017-08-20T15:10:40.137

Set a width to the li for text-align: center to be relevant.

One method of aligning elements vertically using a psuedo elment - add vertical-align: middle to your li and this psuedo after element to your css:

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

See demo below:

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  text-align: center;
  vertical-align: middle;
}

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

If flexbox is an option you can use display: inline-flex, things can be as easy as adding justify-content: center for horizontal and align-items: center for vertical alignment.

See demo below:

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  /*ADDED THESE*/
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

text-align center in
element

2 Answers2

Linked

text-align center in element

2 Answers2

Linked

text-align center in
element