.container>span.a+span.b+span.c How on css to make so that span.b was on the center .container which is stretched on all width, and span.a and span.c nestled on the edges?
What can not just center them, because span.b sizes can vary, but it should always be centered.
Put them inside centered and use absolute.
body { text-align: center; } .c { display: inline-block; height: 4em; background: silver; text-align: left; position: relative; } .l { position: absolute; right: 100%; border: 1px solid; } .r { position: absolute; left: 100%; border: 1px solid; } <div class=c> <div class=l>12345678901234567890</div> <div class=r>123</div> Some centered content </div> 
I think you meant the following behavior.
.container { border: 1px solid black; width: 200px; text-align: center; display: flex; justify-content: center; } .a, .c { width: 0; position: relative; } .a:before { content: "a"; color: red; position: absolute; right: 0; } .c:after { content: "ccccccccc"; color: green; position: absolute; } .b { color: blue; } <div class="container"> <span class="a"></span> <span class="b">bbbb</span> <span class="c"></span> </div> 
Try this:
div.container { background: red; overflow: hidden; text-align: center; } span { border: 1px solid white; } <div class="container"> <span class="a"> Lorem ipsum. </span> <span class="b"> Lorem ipsum dolor sit amet.Lorem ipsum. </span> <span class="c"> Lorem ipsum. </span> </div> Source: https://ru.stackoverflow.com/questions/563070/
All Articles