0

This question is based on this answer: https://stackoverflow.com/a/23876839/994141

I read many threads on this subject, and it seemed to me the best answer because I would like to avoid setting a width.
But the content at the center isn't well centered but based on the content on the left and on the right.
Proof: https://jsfiddle.net/p7kfuont/ ('b' is not centered on the first line)

Is there a way to improve this code (inline-block and float) without setting widths?

Community
  • 1
  • 1
pihug12
  • 317
  • 3
  • 14

2 Answers2

2

Is this what you're trying to achieve?

.container {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}
.container > div {
    display: table-cell;
    border: 1px solid red;
}
<div class="container">
    <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>
<div class="container">
    <div class="left">a</div>
    <div class="center">b</div>
    <div class="right">c</div>
</div>
Stickers
  • 75,527
  • 23
  • 147
  • 186
0

If you want the b to be strictly in the middle you can add this: 

    .container {
      position: relative;
    }

    .container .center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%); /*add this if you want the element centered*/
      -ms-transform: translateX(-50%); /* IE 9 */
      -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    }

the transform: translateX(-50%) will set the center of your element in the center, while without it you will have the left edge of your element in the center.

jsFiddle

beginner-html
  • 11
  • 3