page I'm working with: http://jsbin.com/abewe4
I want the slogan div centered inside col3 div
I'm using
width: 50%;
margin: auto;
on the inner div but still it is not working.
You need to add ‘text-align: center‘ to col3.
.slogan {
color:#143063;
font-size:18px;
**line-height:92px;** //Add this line without the asterisks(*)
margin:auto;
text-align:center;
width:50%;
}
<style>
.col3{
display:table-cell;
width:200px;height:200px;
text-align:center;
vertical-align:middle;
border:1px solid blue;
}
.col3 .slogan{
border:1px solid red;width:100px;height:100px;
display:inline-block;
}
</style>
<div class="col3">
<div class="slogan">
</div>
</div>
You can give any height or width to col3 or slogan the css will make it center align always
You can put any element inside slogan and it will be center aligned :)
I see that you have a div called col3 and a nested div classed slogan. Here is how I would do it.
#col3 {
width: 100%;
text-align: center;
}
.slogan {
width: 600px;
margin: 0px auto;
text-align: left;
}
slogan should have a fixed width for the margin: 0px auto to center it.
Related
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
when i want to float a child div to left or right inside the centered parent div, the whole design goes left or right, depending on the float. So, how to float a child div and make the centered parent div in the center.
HTML:
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS:
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: left;
width: 300px;
}
#child-right{
float: right;
width: 300px;
}
Why does parent div go left/right, and doesn't stay in center? And how to make it to stay in center?
See the demo
#parent{
padding: 0px, auto;
width: 605px;
height:200px;
border:solid 1px #f00;
}
#child-left{
float: left;
width: 300px;
height:200px;
border:solid 1px #0F0;
}
#child-right{
float: right;
width: 300px;
height:200px;
border:solid 1px #00F;
}
For parent div you use this css code
margin:0 auto;
width:980px;
and for child u use this code for float
float:right or left;
width:anypx;
best regards
To center the parent element, use margin: 0 auto;
#parent{
margin: 0 auto;
width: 600px;
}
There are also lots of spelling mistakes in your code (chile not child), and missing > symbols, fix them before you continue
A working JSFiddle (Click me)
How do I center align the image to vertically and horizontally to the div.
I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.
Here is my trail
http://jsfiddle.net/yHdAx/2/
To center align an image, you have to set it's display to block, and then the left and right margins to auto. I also did this with the top and bottom margins, in the new code example. Here is the code required to make this work:
CSS
.test {
background-color:#999;
height:60%;
display:block;
vertical-align:middle;
padding-top: 25%;
padding-botton: 25%;
}
.test img {
max-width:50%;
vertical-align: ;
display: block;
margin: auto auto auto auto;
}
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
</div>
Hey now you can used to table-cell properties in your div as like this
live demo http://jsfiddle.net/yHdAx/3/
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
Css
.test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
text-align:center;
}
.test img{
max-width:50%;
}
more info http://www.brunildo.org/test/img_center.html
Apply display:block to the image and set its margins to auto.
.test {
background-color:#999;
padding: 50px 0;
}
.test img {
display: block;
margin: auto;
}
Here is the fiddle, http://jsfiddle.net/yHdAx/5/
I tried to play with only one div
div {
display:table-cell;
background:red;
width:500px;
height:500px;
vertical-align:middle;
text-align:center;
}
I hope this will also help you :- http://jsbin.com/ihunuq/3/edit
What if you don't set a height on the containing div, would the desig break then?
To center the image just use
.test img {
display:block;
width:25%;
margin:0 auto;
}
You can use position: absolute.
Something like that: jsfiddle.
.test{
background-color:#999;
height:60%;
width: 100%;
position: relative;
}
.test img{
max-width:50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
I need help in centering one DIV withing a DIV.
I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.
Within headerContainer, I want 3 more DIVs:
A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).
I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.
Thanks for any help.
CSS:
.leftDiv{
float: left;
width: 400px;
}
.rightDiv{
float: right;
width: 200px;
}
.centerDiv{
width: 100px;
margin: 0 auto;
}
HTML:
<div>
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
DEMO:
Code: http://jsfiddle.net/Xxwrm/6/
Fullscreen: http://jsfiddle.net/Xxwrm/6/show
This works.
.headerContainer{
width:auto !important;
}
.leftDiv{
float:left;
width:400px;
}
.rightDiv{
float:right;
width:200px;
}
.centerDiv{
display:inline;
width:100px;
margin-left:auto;
margin-right:auto;
}
.
<div class="headerContainer">
<div class="leftDiv"></div>
<div class="centerDiv"></div>
<div class="rightDiv"></div>
</div>
What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.
For example in this case you'd have one # 400px, another # 100px, another # 200px and another one, hidden, # 200px.
Regards,
Richard
<div class="headerContainer">
<div class="leftDiv">left</div>
<div class="rightDiv">right</div>
<div class="centerDiv">center</div>
</div>
This HTML with this CSS will work. I colored the DIV's to make it obvious.
.headerContainer{
width:auto;
}
.leftDiv{
float:left;
width:400px;
background:pink;
}
.centerDiv{
width:100px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
background:cyan;
}
.rightDiv{
float:right;
width:200px;
background:lightgray;
}
However, if the screen is not 700px wide, you will get some wrapping.
Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/
You can use a modern solution due the flex concept of css3.
.parent {
display: flex;
height: 300px;
/* Or whatever */
background-color: green;
}
.child {
width: 100px;
/* Or whatever */
height: 100px;
/* Or whatever */
margin: auto;
/* Magic! */
background-color: yellow;
}
<div class="parent">
<div class="child ">Div1</div>
</div>
I want to set center an outer div alignment. There is some inner div which float is set to left. So outer div is not aligned center
my inner div css is :
.inner {
float:left;
margin:10px;
border:1px solid #898989;
padding:4px;
width:200px;
background-color:#f2f2f2;
}
why is the inner div floated, if it's not needed just center the inner div?
.inner {
margin:10px auto;
border:1px solid #898989;
padding:4px;
width:200px;
background-color:#f2f2f2;
}
OR if inner is floated so it contains further floats.. then you could add overflow hidden to it
.inner {
overflow: hidden;
margin:10px auto;
border:1px solid #898989;
padding:4px;
width:200px;
background-color:#f2f2f2;
}
or you could make inner into an inline block- and wrap it in a div with text-align: center;
<div class="outer">
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div>
.inner {
display: inline-block;
margin:10px;
border:1px solid #898989;
padding:4px;
width:200px;
background-color:#f2f2f2;
}
.inner {display: inline !ie7;}
span {float: left; width: 50px; height: 50px; background: #ffe;}
.outer {text-align: center;}
Without any more detail in your question all I can suggest is
<div style='margin: 0px auto;'>Blah</div>
But it does rather depend on what else you have going on.
The easiest way is to set the horizontal margins to auto:
<div style="margin-left: auto; margin-right: auto;">Content</div>
But it depends on its float attribute as well. Since I don't know what else you have on your site, I can only recommend for you to try different float attributes (left, right, none).
Good luck! :)
try:
<div align="center" style="clear:left">
...
</div>
This is the simplest method:
Provided you set a fixed width,
and the proper DOCTYPE of course, try this
Margin-left:auto;
Margin-right:auto;
Hope it helps.