CODEWITHSUNDEEP
jquerycsscentering
LadyBo
LadyBo

Reputation: 145

Centering fluid div with filling leftout area by sides

I need some fresh look at the next problem, cause I totally stucked at it (I've tried a lot - tables, backgrounds, :before and :after, table-cell displays, but recieve nothing good).

I have a div with fixed width "wrapper" (for example 1000px). Then I have inner construction: line, button, text, button, line. Buttons has fixed width, but text hasn't. So, It might be next situations:

1: -------------------- < Some text > --------------------

2: ---------------------- < Nope > -----------------------

3: -------------- < Big inner text inside > --------------

As you see, text should be always in center, but those lines from left and right should fill the leftover area from left and right.

Is it possible to do in css? Or only with jQuery?

Thanks for help in advance. Would be glad to any links and tips )

Upvotes: 0

Views: 44

Answers (1)

Anon
Anon

Reputation: 2874

Try this.
CSS

  p{position:relative;text-align: center;}
  p:after{
    content:'';
    position:absolute;
    top: 50%;
    width: 100%;
    left: 0;
    border-top:1px dashed #000;
    z-index: 1;
  }
  p span{
    display: inline-block;
    background: #fff;
    position: relative;
    z-index: 2;
    padding: 0 10px;
  }

HTML: <p><span>asdadasdas</span></p>

Upvotes: 1

Related Questions