CSS: Center a child div within a parent div

Question

Does any one have any suggestions on how I can center content within 'div.footer-widgets .widget.widget_text' the child div is 'div.widget-wrap'. Here is an image link showing you the area within my browser on a local host: http://postimg.org/image/pr7x4cyk9/

div.footer-widgets .widget.widget_text {
height: 250px;
}

.widget.widget_text input#subbutton {
width:200px;
}

Please let me know if I should provide any further information, thank you.

vertically center: http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css, http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div and half a dozen more. — Salman A, Aug 12 '14 at 18:01

score 0 · Answer 1 · answered Aug 12 '14 at 14:29

0

Try this:

.widget.widget_text input#subbutton {
    width:200px;
    margin:0 auto;
    display:block;
    position:static;
}

answered Aug 12 '14 at 14:29

Marc

4,661
3
40
62

No luck unfortunately, I believe this class targets the green button, but even when applying this code to the class it did not center the button. I would like to center the button and the title/heading. – Tom25 Aug 12 '14 at 14:44
PS - When I say center, I mean horizontally and vertically. – Tom25 Aug 12 '14 at 14:45

score 0 · Answer 2 · answered Aug 12 '14 at 17:58

If you don't need a definite height, you can use padding (top & bottom) to automatically center a div's contents, like in this fiddle.

(renamed divs to make it easier for me, sorry)

#inner {
    width: 266px;
    text-align: center;
    padding: 40px 15px;
}

CSS: Center a child div within a parent div

2 Answers2