0

I have two divs. The wrapper div (divider_header) is positioned relative and has a float to the left while its child (divider_txt) is positioned absolute.

<div class="divider_header">
    <div class="divider_txt">Friend Requests</div>
</div>

I'd like to know how can I center text horizontally inside of the divider_txt wrapper?

CSS (doesn't work):

.divider_header {
    display: table;
    position: relative;
    border-bottom: 1px solid #666;
    padding: 1px 0;
    width: 418px;
    margin: 0 auto;
    float: left;
}

.divider_txt {
    display: table-cell;
    text-align: center;
    font-size: 13px;
    font-family: "Open Sans Condensed", Arial, sans-serif !important;
    vertical-align: middle;
    position: absolute;
    z-index: 2;
    background-color: #121219;
}
msturdy
  • 10,479
  • 11
  • 41
  • 52
drpelz
  • 811
  • 11
  • 43
  • 1
    Do you know how large your child div's content will be? In any case, this will answer your question most probably: http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally – Volker E. Jul 23 '13 at 00:33
  • The outer div has a width of 418px. The width of the inner div is unknown because it's dynamic text. Thnx for the link I'll check it out!:D – drpelz Jul 23 '13 at 00:39
  • 1
    left:0px;right:0px; for divider_text so that it resizes to parent size. will it do? – gp. Jul 23 '13 at 01:10

1 Answers1

2

So text-align: center is doing your job, if aligning the text horizontally centered is your only question: http://jsfiddle.net/Volker_E/5jv2Q/2/

And your updated and simplified CSS:

.divider_header {
    /*display: table;*/
    float: left;
    position: relative;
    width: 418px;
    border-bottom: 1px solid #666;
    padding: 1px 0;
}

.divider_txt {
    background: #121219;
    color: red;
    font: 13px "Open Sans Condensed", Arial, sans-serif;
    text-align: center;
}
Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • 1
    Doesn't work in my case. 'divider_txt' must be position:absolute because I have to move it from the top. – drpelz Jul 23 '13 at 15:39
  • Check out this: http://jsfiddle.net/5jv2Q/5/ 'divider_txt' is not in the center any more. I want to create a headline where there a lines at the right and left. – drpelz Jul 23 '13 at 15:55
  • 1
    Well, that's a pretty different question: http://jsfiddle.net/Volker_E/5jv2Q/13/ Btw, a heading should always be marked up as heading (`

    ` in my case).

     – Volker E. Jul 23 '13 at 16:38
  • Thanks so much! Now it's working!:) You saved my day! Awesome!:D I updated it a little bit! Check it out: http://jsfiddle.net/5jv2Q/24/ – drpelz Jul 23 '13 at 16:43