We can set a image as background image of a <div>
like:
<style>
#test {
background-image: url(./images/grad.gif);
background-repeat: no-repeat;
background-position: center center;
width:80%;
margin-left:10%;
height:200px;
background-color:blue;
}
</style>
<div id="test"></div>
I need to set a table at the center of a <div>
horizontally & vertically. Is there a cross-browser solution using CSS
?
This question is related to
css
I discovered that I had to include
body { width:100%; }
for "margin: 0 auto" to work for tables.
To position horizontally center you can say width: 50%; margin: auto;
. As far as I know, that's cross browser. For vertical alignment you can try vertical-align:middle;
, but it may only work in relation to text. It's worth a try though.
You can center a box both vertically and horizontally, using the following technique :
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
If you use this technique, just add your table (along with any other content you want to go with it) to the content box.
body {_x000D_
margin : 0;_x000D_
}_x000D_
_x000D_
.outer-container {_x000D_
position : absolute;_x000D_
display: table;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
background: #ccc;_x000D_
}_x000D_
_x000D_
.inner-container {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.centered-content {_x000D_
display: inline-block;_x000D_
background: #fff;_x000D_
padding : 20px;_x000D_
border : 1px solid #000;_x000D_
}
_x000D_
<div class="outer-container">_x000D_
<div class="inner-container">_x000D_
<div class="centered-content">_x000D_
<em>Data :</em>_x000D_
<table>_x000D_
<tr>_x000D_
<th>Name</th>_x000D_
<th>Age</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Tom</td>_x000D_
<td>15</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Anne</td>_x000D_
<td>15</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Gina</td>_x000D_
<td>34</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
See also this Fiddle!
Additionally, if you want to center both horizontally and vertically -instead of having a flow-design (in such cases, the previous solutions apply)- you could do:
absolute
or relative
positioning (I call it content
).wrapper
).wrapper
div.#content {_x000D_
width: 5em;_x000D_
height: 5em;_x000D_
border: 1px solid;_x000D_
border-color: red;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
#wrapper {_x000D_
width: 4em;_x000D_
height: 4em;_x000D_
border: 3px solid;_x000D_
border-color: black;_x000D_
position: absolute;_x000D_
left: 50%; top: 50%; /*move the object to the center of the parent object*/_x000D_
-webkit-transform: translate(-50%, -50%);_x000D_
-moz-transform: translate(-50%, -50%);_x000D_
-ms-transform: translate(-50%, -50%);_x000D_
-o-transform: translate(-50%, -50%);_x000D_
transform: translate(-50%, -50%);_x000D_
/*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/_x000D_
}_x000D_
_x000D_
table {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
border: 1px solid;_x000D_
border-color: yellow;_x000D_
display: inline-block;_x000D_
}
_x000D_
<div id="content">_x000D_
<div id="wrapper">_x000D_
<table>_x000D_
</table>_x000D_
</div>_x000D_
</div>
_x000D_
Note: You cannot get rid of the wrapper div, since this style does not work directly on tables, so I use a div to wrap it and position it, while the table is flowed inside the div.
Here's what worked for me:
#div {
display: flex;
justify-content: center;
}
#table {
align-self: center;
}
And this aligned it vertically and horizontally.
Just add margin: 0 auto;
to your table
. No need of adding any property to div
<div style="background-color:lightgrey">_x000D_
<table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">_x000D_
<tr>_x000D_
<th>Name </th>_x000D_
<th>Country</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>John</td>_x000D_
<td>US </td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Bob</td>_x000D_
<td>India </td>_x000D_
</tr>_x000D_
</table>_x000D_
<div>
_x000D_
Note: Added background color to div to visualize the alignment of table to its center
Source: Stackoverflow.com