How to align the inside box to center of the table


Tags: html,css,table

Problem :

I have the table, inside the table i have another box , i am stuggle to align the box in center of the table.

My css code is

Inside box code

.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}

outside table css :

.outer_table {
    border: 1px solid black;
    border-radius: 5px;
    color: #1A6DAC;    
    font-size: 24px;
    left: 40px;
    padding: 20px;
    position: absolute;
    top: 260px;
    width: 740px;
}

enter image description here how to align the inside box in center



Solution :

I assume that your HTML is something like this

<div class="outer_table">
    <div class="inside_box">hello world</div>
</div>

So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this

Demo

<div class="outer_table">
    <div class="inside_box"><div>hello world</div></div>
</div>

And use CSS like

.inside_box {
    border: medium solid;
    display: table;
    font-family: Helvetica-bold;
    font-size: 20.19px;
    height: 100px;
    margin: auto;
    width: 300px;
}
.outer_table {
    border: 1px solid black;
    border-radius: 5px;
    color: #1A6DAC;
    font-size: 24px;
    left: 40px;
    padding: 20px;
    position: absolute;
    top: 260px;
    width: 740px;
}

.inside_box > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.


Note: You won't need float: none;, not sure why you are using that.


As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.

From Mozilla Developer Network :

enter image description here


    CSS Howto..

    iphone - How to implement the effect of “float” for image, just like in CSS style

    How do I apply a border around a checkbox when checked?

    how to add parent class in css file?

    Show Content if below specific width

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to find an element using Watir by inline css styles

    How to override CSS :hover?

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How do I move this scrolling bar closer to the post area?

    How can I use jQuery and/or CSS3 to change how many unordered list items are displayed?

    How to create animated element that follows browser like on http://metalab.co/projects/swivl/? [closed]

    How to set a child's element 50px narrower to its parent element in css? [closed]

    how to prevent css animation from running on page load

    How can I separate areas with floats from each other?

    website div won't stretch from left to right, how do you fix css?

    how to apply css on only one class?

    How does max-width property make images responsive?

    How to Center CSS Tabs

    how to link and apply external css file

    How to change background color of my selector's Pseudo-element on rollover?

    jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    CSS/HTML how not to overlap fixed header

    How to add an icon to a button at the bottom right corner

    How to move an image up and down smoothly with CSS?

    How can I get these two widgets to align horizontally using CSS selectors?

    How to apply CSS using User Scripts

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How can I set a html web page adapt to only a tablet size or large screen in css? [closed]

    How to add custom CSS for displaying on mobile screens in WordPress?

    How to select a non unique element through CSS