I'm fairly new to HTML and CSS and I've been trying to figure out how to center this div class called .content in the middle of the page that is wrapped around my table data. I have googled around and what I have found is that I should set the left margin to 0 and the right margin to auto but what I get when I do this is the entire table stays on the left side of the page.
Right now I have the margin-left at 500px trying to to get it close to the center of the page but I think if I do it this way it will not be centered on other screens with different resolutions and I would like for it to be centered no matter what the screen size is.
HTML
<body>
<h1>Table</h1>
<div class="content">
<table>
<tr>
<th>Data</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</div>
</body>
CSS
body {
border: 1px;
border-color: black;
border-style: dashed;
}
h1 {
border: 1px;
border-color: green;
border-style: dashed;
color: red;
text-align: center;
}
.content {
border: 1px;
border-color: orange;
border-style: dashed;
color: red;
display: inline-block;
margin_right: auto;
margin-left: 500px;
text-align: center;
}
.content th {
border: 1px;
border-color: green;
border-style: dashed;
}
.content td {
border: 1px;
border-color: red;
border-style: dashed;
color: blue;
}
Since your .content does not have a fixed width you cannot use margin:0px auto which would center the content. In your case u can just it on the table element like this:
table{
margin:0px auto;
}
but you need to remove display:inline-block from .content for this to work.
Centering means equal margins from left and right. Therefore, side margins should be set to auto, like so:
.content {margin: 0 auto}
...where 0 is the margins from top AND bottom and auto are margins from left AND right
I'd remove inline-block from there as well.
Update .content as
.content {
display: inline-block;
border: 1px;
border-style:dashed;
border-color: orange;
color: red;
text-align: center;
margin-left:auto; #make this as auto
margin-right: auto;
}
However this will align .content at the center horizontally, but if you want .content in center vertically then
.content{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
In your case in particular, the best solution is to adjust the two "margin" properties inside your .content class declaration from:
margin-left:500px;
margin_right: auto;
To:
margin-left:auto; margin-right:auto;
Be aware that "margin_right" needs to have a hyphen ('-') not an underscore.
Related
I have been trying to include the table inside the div, but it seems not to be working. Here is my code:
table {
border: 5px red solid;
border-style: double;
background-color: aqua;
position: absolute;
}
body {
background-color: azure;
text-align: center;
}
div {
position: relative;
border: 5px red solid;
border-style: ;
}
<div>
<p>Hello this is for the practice.</p>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
position: absolute;
removes an element from the document flow. That means that other elements just render as if the absolute positioned element wasn't there at all. Thus, the parent element just ignores the table in your code.
Aside from that, your question and what you want to achieve unfortunately is completely in the dark. Please add details as of what you are aiming to achieve.
It works better if you don't use the 'position' settings:
<style>
table {
border: 5px red solid;
border-style: double;
background-color: aqua;
/*position: absolute;*/
}
body {
background-color: azure;
text-align: center;
}
div {
/*position: relative;*/
border: 5px red solid;
border-style: ;
}
</style>
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
Is it possible to make to panel-body div adjust to screen resolution when its 'display' is set to 'inline-block'? The panel-body div displayed full width when its 'display' set to 'block', which can cause other problems.
HTML code:
<div class="panel-body">
<table class="table table-hover table-bordered">
</table>
</div>
CSS code:
.panel-body {
padding: 15px 20px 15px 20px;
border-bottom: 1px solid #e5e5e5;
display: inline-block;
}
.table
{
width: 100%;
margin-bottom: 20px;
}
Notice that if set 'min-width:1100px;' to the table CSS, the table width is fixed, not able to adjust to the screen resolution.
Try this out
.panel-body {
padding: 15px 20px 15px 20px;
border-bottom: 1px solid #e5e5e5;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.table{
width: 100%;
height: 20px;/*Remove this*/
margin-bottom: 20px;
background: #ff0;/*Remove this*/
}
CodePen sample of code
Try this for outer div is responsive and the inner table with some width...
.panel-body {
width: 96%;
padding: 2%;
border: 1px solid #e5e5e5;
overflow-x: auto;
}
.table
{
width: 100%;
min-width: 1100px;
}
<div class="panel-body">
<table class="table table-hover table-bordered">
<tr>
<td>Sample data</td>
</tr>
</table>
</div>
I've got a container element that's a certain width, with overflow-x: auto. In it I have a block level header element (h1) that's supposed to, being a block element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space.
Fiddle demonstrating the problem: http://jsfiddle.net/rand0mbits/qUh3s/
HTML:
<div id="one">
<h1>header</h1>
<table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td></tr></table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
}
table td {
border: solid 1px;
padding: 20px;
}
How do i make the <h1> fill the whole width of the container?
See the fiddle.
Use the HTML caption element:
<div id="one">
<table>
<caption>
<h1>header</h1>
</caption>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
margin-top: 0;
text-align: left;
}
table td {
border: solid 1px;
padding: 20px;
}
The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.
What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.
jsfiddle: http://jsfiddle.net/yetti/Ggua5/
Try this:
css
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
position:relative;
}
table td {
border: solid 1px;
padding: 20px;
}
h1:after {
content:"";
background: blue;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left:100%
}
fiddle
Change this CSS code like the following then check and let me know if you want this:
#one {
width: 100%;
overflow: auto;
border: solid 1px;
}
I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?
This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397
You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/
Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.
You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo
Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}
You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle
if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)
Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/
Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/
You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/
Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.