I have a div which has css style float:right.
The problem is, I want to align some text in the div to be in center. However, the text is always at left side. I use text-align:center but it useless.
I appreciate for any help. Thanks!
Here is my code:
<div style='float:right'>
<span style='text-align:center'>some text...</span>
</div>
You have to set display:block; to the span element .. here's a fiddle
To text-align:center the text inside a floated div, the width of the width should be greater than the containing element.
For example: assume your span tag has some text which occupies 100px. When you float the parent element to left or right, it will be floated correspondingly and takes the width as 100px because you haven't specified a width for it. So specify a width for it, in you case the div which is floated left.
Try this:
<div style='float:right; width:200px; text-align:center;background:red;'>
<span style='text-align:center'>some text...</span>
</div>
You can remove the background-color since i gave it for reference.
OR
You can even specify a width for the element which you want to center align. In your case since span is an inline element, you have to specify a width and also give it display:block
<div style='float:right; background:red;'>
<span style='text-align:center; width: 200px; display:block;'>some text...</span>
</div>
You need to but text-align:center in th div
see this jsfiddle
css
div
{
float: right;
width: 200px;
height: 200px;
border: solid 1px;
text-align:center;
}
It's because you have never defined a width for the div. So the text is centered, because the div is only as wide as the text. Try giving the div a width of 50% (or how ever wide you want it) then applying text-align:center.
<div style='float:right;width:50%;text-align:center;'>
<span>some text...</span>
Set display: block for the span tag
<div style="float: right; width: 200px; height: 200px; border: 1px solid gray;">
<span style="text-align: center; display: block;">some text...</span>
</div>
make the span a div and it will work (I just gave the container a width and a border, so that you can see the effect better):
<div style='float:right; width:200px; border:1px solid #000'>
<div style='text-align:center'>some text...</div>
</div>
DEMO HERE
Related
I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?
Here is my code:
<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
</div>
I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.
You can test the fiddle I created to understand the problem:
http://jsfiddle.net/tQpM5/
Thanks
If I understand correctly, you want to center 3 boxes on the same row:
.wrapper{
margin:0 auto;
text-align:center;
vertical-align: top;
}
.box{
width:200px;
height:50px;
display:inline-block;
text-align:left;
}
HTML:
<div class="wrapper">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
</div>
demo
Since all the child divs widths are less than that of the parents, they should naturally line up side by side. Try give each child div a position: relative; margin: auto. This way they should center themselves with in the parent
The parent div appears as a line because its contents is floating, settings its height to 1px. To resolve this you need to clear the floats after this element. Often referred to as clearfix.
.clearfix:after {
clear: both;
content: "";
display: table;
}
Then you can just float the children as normal. I used margin: auto on the parent to make it centered.
See this demo:
http://jsfiddle.net/c2NjZ/
Note for old browser support on clearfixing see:
http://css-tricks.com/snippets/css/clear-fix/
The container div's float and it's child div's float values (or no float) are independent of each other, you just need to clear the child div's before you close the parent div:
<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
<div class="child" style="float:left;">
Hi
</div>
<div class="child" style="float:right;">
There
</div>
<br class="clearfloat">
</div>
Update to your example: http://jsfiddle.net/tQpM5/2/
What you need is to give the parent div: overflow:hidden; so it can contain its child div.
Child divs will float beside each other, however when you re-size your browser, they will float under each other, to avoid this, you can give the parent div a min-width.
To center the parent div, you can give it a margin-left:auto; margin-right:auto;, however you must specify a width so that it does not stretch and take all its available width.
Since you chose to use floats and not inline-block, then the only thing left is to deal with margins just like you said.
DEMO
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
I have a large div that I want to put content in. I want the div to be padded and have a minimum height so that if there is too much text in the div it expands down to maintain the padding. But I also don't want it to get less than 100px in height. Currently, when I run this code, some of the text falls outside of the div.
HTML:
<div id='content'>
<div>lots of text in here</div>
</div>
CSS:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid gray;
min-height: 100px;
width: 800px;
padding: 60px;
}
Well, try to use paragraphs in your HTML, instead of duplicating divs. It does not work because the duplicate div is not styled in your CSS.
<div id='content'>
<p>lots of text in here</p>
</div>
If this solves your problem, feel free to accept this answer.
You can add height:auto; to your css, it may help.
I am aware that you can center a block item by setting the left and right margin to auto.
However, is it possible to align it to the right edge? And how would this be done?
Edit: without using float: right (because it doesn't seem to work, at least not with <ul>'s)
Edit again: Here is a snippet of the code:
<td style='vertical-align: top; text-align: center;'>
<b>Choices:</b><br><br>
<ul id='orderchoices' style='margin-left: auto; margin-right: auto;'>
...
</ul>
</td>
Here is the style for #orderchoices
#orderchoices li {
border: 1px solid #666;
background: #333 url(images/dark_gloss.png) repeat-x;
color: #eee;
margin: 3px;
padding: 5px;
cursor: pointer;
width: 160px;
font-style: italic;
}
I want the ul right-aligned in the td
<div class="outer">
<div class="inner">I'm the inner element!</div>
</div>
<style type="text/css">
.outer { position:relative; }
.inner { position:absolute; right:0px; }
</style>
If your inner element is positioned absolutely within a container that is positioned relatively, you can use top, right, bottom and left to indicate the inner element's distance from the edges of the parent container.
Make sense?
To right align a block element to its parent try using float.
Remember to add an element after to clear the float so the bottom of the parent respects the bottom of the floated element.
<div id="parent">
<div style="float: right">
<div>your stuff here</div>
</div>
<div style="clear:both"></div>
</div>
The 'position: absolute' method can also work, but when an element is positioned this way it is removed from the flow of html, thus its parent does not know the height of the absolute positioned element - hence the reason it might slip off the end of the page. You can overcome that by setting the height on parent but that of course relies on the fact that a) you know the height before hand, b) it won't change
I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.