http://pixphoriad.haneuri.net/index2.php
The top div for the header centers fine but for some reason the content in the footer is not centered. Here's the css for the footer:
div#footer {
background-color: #000;
color: #fff;
position:relative;
height:350px;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
apply these rules to center tag...
overflow: auto;
display: inline-block;
Btw, center tag is obsolete, i had never seen it until now. But whatever..
I like overall site...It shows passion.
Define the width you want and give margin like this:
div#footer {
width: 500px;
margin: 0 auto; /* or `10px auto` to add margin top and bottom */
text-align: center; /* align text center aligned*/
}
I would suggest that you add the following lines to your div#footer:
overflow: auto;
display: inline-block;
Related
I'm trying to align some tiles that I have in my website to center. There are 4 tiles with two in the first row and other two in the second. I'm trying to align these DIVs to the center of the page but I'm not able to.
I've added margin: 0 auto; to the parent DIV and also included position: relative and display: inline-block; as suggested by some other posts but not able to align in yet.
Below is the code that I'm writing:
<div class="parent">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="clear"></div>
</div>
The CSS Code:
.parent{
width: 1000px;
margin: 0 auto;
position: relative;
}
.child{
float: left;
margin: 2px auto;
width: 25%;
background-color: green;
position: relative;
display: inline-block;
}
.clear{
clear: both;
}
And the jsfiddle: http://jsfiddle.net/wj1a2fnj/4/
After all this I'm not able to align the child DIVs to the center. I'm a novice in CSS and figuring my way now. Any help will be greatly appreciated.
Thank you.
You need to remove float: left; from the .child and add text-align: center; to the .parent
div to center inline-block child elements inside it.
Try this - DEMO
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size:0; /* to remove the white space between inline-block elements */
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
font-size:16px; /* reset the font size (i.e 1em = 16px) */
}
You could also add a <br> tag instead of <div> tag after the second child - http://jsfiddle.net/p6rkw5ax/
Add text-align: center; to your parent div and it works
.parent{
width: 1000px;
margin: 0 auto;
text-align: center;
font-size: 0; --> To make the space void in between divs
}
ADD
.child{
<--float: left;--> REMOVED
font-size: 14px;
display: inline-block; --> To make the div float next to each other
}
WORKING EXAMPLE
You could do something like this...
<div align="center">
<div>whatever you want to align</div>
</div>
Just make sure whatever you are aligning to center has a relative css position and not absolute or anything else...
DEMO
.parent{
width: 1000px;
margin: 0 auto;
list-style: none;
position:relative;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
margin: 2px auto;
width: 25%;
background-color: green;
}
text-align: center works
Just add it to your CSS for child class.
http://jsfiddle.net/wj1a2fnj/6/
EDIT:
The reason why its not aligning the parent div to the center is because you are using floats.
Remove the float and adjust margin: 0 auto and you will get what you want;
Updated Fiddle: http://jsfiddle.net/wj1a2fnj/19/
I have a div meant to contain all content on said site, an image I have nested into the div doesn't want to center and I'm not sure why?
here is the CSS.
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}
#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
intro is the id given to said img, it just floats to the left of the div( id is wrapper) and wont center even though I have right and left margins set to auto?
The problem with margin: auto; is that it will only center block level elements ... and img is by default displayed as inline and follows the text flow (to the left). If you add display: block to it it should work:
DEMO
#intro {
display: block;
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
This way you don't need to centrally align the text of the wrapper element.
But if you want to center all inline children of the the wrapper - just use text-align:center on the #wrapper ... however then you may need to have line breaks before and after the images or some text could end up next to them and push them out of the center =)
DEMO
Use text-align: center on main container:
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
text-align: center;/*Add text-align center*/
}
This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}
I have 3 images that are all in the same line and float left but i would also like to centre them. I have tried using margin: 0px auto; but it doesn't seem to do anything. Any suggestions?
CSS:
#boxes .box {
width:370px;
height:241px;
float: left;
margin: 0px auto;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color: #FFF;
}
It is impossible to center floated items. One of the things you can do - is make the items inline-block and set the text-align: center property to their parent. Online example: http://jsfiddle.net/8HPWU/
From your selector, I can make out that the boxes which are floated to the left are nested inside element having an id of #boxes, so if you can, assign some fixed width to #boxes and than use margin: auto;
#boxes {
width: 800px; /* You need to set this */
margin: auto;
}
Demo
You should align to center to your parent div that is #boxes not to your image. Try this:
#boxes{
margin: 0 auto;
text-align: center;
}
Add this CSS
#boxes .box {
width:370px;
height:241px;
float: left;
margin: 0px auto;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-position:center center;
background-color: #FFF;
}