How to size a div box in CSS so text is centered regardless of length


Tags: jquery,html,css,text-align

Problem :

I find it difficult to express the question in words since I'm not knowledgeable enough about CSS. So, I've made two example jsfiddles.

In this first example we see how the output shows a left aligned text. http://jsfiddle.net/Aro2220/yw38p/

But in this second example we see that when the text is long enough it fills the entire width of the frame (not sure if that's the correct term) and centers nicely all the way down. http://jsfiddle.net/Aro2220/DUcP6/

I am trying to get the text to be perfectly centered in that frame regardless of length. How can I do this? My CSS is pretty sparse and I'm not sure if there's a CSS command I'm missing that does this easily or if this is a complicated task.

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;    
}

#inner {
   position: relative;  
   top: 0px;    
   text-align: center;
}


Solution :

use this Demo1 Demo2

this will do the trick

#outer {
    position: absolute;
    overflow: hidden;
    height: 200px;
    width:100%; // added this to make the outer div width 100%
}

Suggested by sfjedi

if you have issues w/ margins and/or padding giving you an unwanted horizontal scrollbar, use css box-sizing: border-box so the 100% width doesn't throw you off


    CSS Howto..

    How to get equal height for all sections?

    How to add margin-top to Responsive Multi-Level Menu and not effect navigation animation?

    How to hide a CSS media query from print? “not” logical operator does not work

    contenteditable does not show pseudoselector :before in safari

    How to make in CSS an overlay over an image?

    How to add styles based on whether top element is empty

    How to crop a rectangular image into a square using CSS?

    How to Make Hover Background Fade Smoothly In and Out?

    How to avoid HTML element being matched by CSS and reset it?

    How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

    How can I get images floated to the left of other definition list elements?

    How to add hover effect to menu using jQuery

    how to set the absolute position div center align

    How can I add my custom style for my bootstrap navbar?

    How to center HTML content

    How to make my text appearing while scrolling website

    Using `.toggle()` rather than applying a class to show content

    How to make nav and right block fixed, also keep the whole container is in center?

    How add symbol in CSS for element?

    How to make LESS combine CSS rules with a comma

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How do I get rid of the big margin between my labels and the input fields?

    How to achieve multiple icon hover transitions over one image

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How to create correct .css for Html.TextBoxFor

    How to ignore body element style when there is a class at element inside

    How to make all the rows of a table the same height as the biggest one

    How to get highlighted words and wrap it in new element with data-attribute?

    How to show a notification bar on Top after n seconds with transition from top to down?

    Glide.js, how to check size of image?