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.
Related
I am working on responsive design. I have div (WebPage_NavigationWrapper) and inside I have floating-left divs (function_block). Now I want to scroll bar in case floating divs cannot adjust in single line; meaning main div height remain same. Due to responsive design I am not using PX so I believe I am not providing height of div, unless I am wrong!
<div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
</div>
</div>
CSS
#WebPage_NavigationWrapper{
display: table;
table-layout: fixed;
width:100%;
padding:10px;
overflow-x: scroll;
}
.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}
.function_block:hover{
background-color:#CDE5F2;
}
.CreateNewEntry_Icon{
margin-left:10px;
width:85px;
line-height:5;
display:inline-block;
background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
}
i think this will help you,
replace your code with following
#WebPage_NavigationWrapper{
width:400px;
height: 100px;
padding:10px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
.function_block{
display: table-cell;
padding:2px;
width:120px;
height:60px;
}
I think this is a classic one. I found a lot of similar questions but no answer.
I want to vertical center any image of any not-known height into a div with overflow:hidden
This is what I have right now:
.outer {
padding-top:49px;
height:49px;
width:280px;
overflow:hidden;
background-color:yellow;
}
.outer .inner {
float:left;
position:relative;
display:block;
background-color:blue;
}
.outer .inner img {
position:relative;
top:-50%;
width:280px;
height:auto;
border:0px;
display:block;
}
So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…
Does anybody know what I am doing wrong?
Thank you in advance!
I faced a similar situation and solved it with a different approach.
For that I used the image as a background image of a div.
Code sample
<head>
<style>
div.imgbox1{
width: 160px;
height: 110px;
overflow: hidden;
background-position: 50% 50%; /* for vertical and horizontal center alignment*/
}
</style>
</head>
<body>
<div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
</div>
</body>
If using img tag isn't a must you can try this
First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.
Now... A possible solution...
Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?
Take for example this JSFiddle.
You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.
If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).
HTML:
<div class="outer">
<div class="inner">
<img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
</div>
</div>
CSS:
.outer {
height:520px;
width:520px;
overflow:hidden;
background-color:yellow;
border: 2px solid purple;
}
.outer .inner {
width: 340px;
display:block;
background-color:blue;
border: 1px solid red;
padding: 10px;
margin: 0 auto;
}
.outer .inner img {
width:280px;
height:auto;
margin: 60px auto;
border:0px;
display:block;
border: 1px solid orange;
}
A second possible solution...
Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.
See this JSFiddle for a demonstration of this solution.
HTML:
<div class="inner">
</div>
CSS:
.inner {
width: 540px;
height: 340px;
display:block;
background-color:blue;
border: 1px solid red;
margin: 0 auto;
background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}
I have two different divs, one that floats left and one that floats right. They are much smaller than the whole page (about 400x200 each) and so the two are far apart hugging the edges of the page. How can I get them next to each other in the center? I tried setting the margins to auto and about 20px, respectively, but it did not change anything..
This is a job for inline-block!
http://jsfiddle.net/hyw6P/
<div id="container">
<div id="left">Left!</div>
<div id="right">Right!</div>
</div>
#container{
text-align:center;
width:100%;
height:300px;
border:1px solid black
}
#left{
border:3px solid blue;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
#right{
border:3px solid red;
height:100px;
width:100px;
margin:auto;
display:inline-block;
}
Give them a parent div with "margin: 0 auto; width:1000px;"
<div style="margin:0 auto; width:1000px;">
<div style="float:left">Left</div>
<div style="float:right">Right</div>
</div>
Or if you want them right next to each other:
<div style="margin:0 auto;">
<div style="float:left">Left</div>
<div style="float:left">Right</div>
</div>
Add a wrapper div around them both. Set a width on the wrapper and set margin top and bottom to 0 and the left and right to auto. Then set the width of the two float divs to fit the wrapper e.g. 50% will make them the same width.
Try using a z-index and position absolutes, or relative
Heres a link to help ya out
<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>
http://www.yourhtmlsource.com/stylesheets/csslayout.html
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/default.asp
You can accomplish this with a wrapper div and setting the child divs to display as inline-blocks.
CSS:
#a, #b{
border: 1px solid #999;
width: 100px;
display:inline-block;
}
#container {
text-align:center;
}
HTML:
<div id="container">
<div id="a">a</div>
<div id="b">b</div>
</div>
jsFiddle example.
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>
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.