how can i center a nested div


Tags: css,html,centering

Problem :

i am trying to center a nested div vertically to create a simple math problem (with fractions) and im not sure how to do it (without hardcoding it based on the parent div height)

what i have so far looks like this:

enter image description here

i am trying to center the plus sign ( div .plus )

html

<div class = "problem">
    <div class = "fraction">
        5
        <hr />
        6
    </div>
    <div class= plus>
        +
    </div>
    <div class = "fraction">
        5
        <hr />
        6
    </div>
</div>

css

.fraction{
    width: 15px;
    text-align: center;
}

.problem > *{
    float: left;
    margin: 10px;
}

fiddle



Solution :

You can use inline-block instead of float:

.problem > *{
  display:inline-block;
  margin: 10px;
  vertical-align:middle;
}

The demo http://jsfiddle.net/NT6d5/2/


    CSS Howto..

    How to implement this menu using css pseudo-class selector?

    How to apply different CSS style to child elements as they occur inside one another?

    How to set different css attributes with JQuery?

    How can I make a designer's static web page run in rails 4

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    CSS isn't shown when HTML file is opened in Word

    How can I prevent divs animated using CSS keyframes from colliding

    How to stop jquery from overriding CSS color?

    How do I resize a div relative to browser window size?

    IE11 dosen't show CSS-Content properly

    How can I make kinetic.js full screen background view

    How do I control the wrapping of these
  • items?
  • How to get a white outline around an image in CSS

    How to use sprite images in html/css and toggle change with jQuery

    How to wrap text around image?

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to centre and make responsive a row of divs

    css: how to inherit whole class

    How do I create tabs in vertical alignment?

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    How to optimize my css/html webpage? [closed]

    How can a URL fragment affect a CSS layout?

    How to make images stay on one long line?

    How to make a CSS transform affect the flow of other elements

    How to insert the number into the bottom right of each page by TWIG and CSS

    How to understand other people's CSS architectures?

    How to see the source code of a particular html tag by onClick() javascript without showing its css?

    How can I cut too wide image in HTML?

    How does css position impact element width/height?

    How can I get my text to hug around the top of my image?