How do I center text relative to its parent div with CSS?


Tags: html,css

Problem :

I know I can use text-align: center; on the parent div to center all its child elements, but what if I don't want all the child elements centered? I just want, say, one child element centered relative to the parent.

Say I have everything within a wrapper div. Some headers, forms, etc. But at the bottom I want to center a small line of text crediting something. How would I achieve that if its hierarchy is body > div.wrapper > div.credit?



Solution :

So why you are complicating the CSS here? Simply wrap that text in a div and use text-align: center; for that particular div and you are done

And if you want to declare in a CSS hierarchy manner just use this

body div:last-child {
   text-align: center;
}

Note: Be sure the text you want to be centered is the last div you are using else don't use last-child selector, better declare a class


    CSS Howto..

    How to disable css transition for specific line of css?

    How can I style dynamically created elements within an iframe?

    How can I override CSS id?

    How to deploy just HTML, CSS webpage to jetty?

    How do i add a background image to my header?

    how to change single li element in a menu using lists?

    How to know from css if a select is opened

    How can I get .less compiler support in Visual Studio 2012 Release 2?

    How to position div underneath dynamic ul

    How to change the css of child and subchild menu's border together

    Added ellipsis for long text but it showing below the text

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to center content vertically with unknown content and fixed layout

    How to add CSS class to the HTML5 picture element

    How to vertically align a form and image

    How can I select an nth element without knowing the element in CSS?

    How to cancel an upstream CSS declaration?

    How to give an element with an id a certain CSS property if it has a class?

    How to create a tag using css

    How to customize the size of JCoverFlip?

    How to use both fixed and stretchy CSS content

    How to disable and enable css rule

    jQuery wait for show()? Getting wrong data

    How to center jqPagination widget?

    How to display text in the middle?

    Css - how to add an image outside a text box (on the left side but touching the box)

    how can I set the opacity of the background of a span, but not the text? [duplicate]

    How browser auto resize website to mobile browse?

    How do I conditionally apply CSS styles in AngularJS?

    How can i put two divs and one nav into the header at the top-left, top-center and top- right with css