I have the following code:
<div class="one">
<p>Test<p><span style="color: Green">▼</span>
</div>
This is a really easy question I think but I don't know CSS. How can I make the paragraph appear aligned horizontal in the center?
There are two issues here.
To center the DIV that contains the paragraph.
To center the paragraphs that come within the DIV.
To center the DIV, here's the code using inline styling:
<div style="margin: 0 auto" class="one">
<p>Test<p>
</div>
The above will center the whole DIV but NOT align the text to the center. Again, the div will only get centered if the class "one" has a width specified. Otherwise, it has no effect. You can also include the margin style info inside the class named "one".
Now, to align all text that appear within the DIV horizontally, you can style it like this:
<div style="text-align: center" class="one">
<p>Test<p>
</div>
And if you want to apply the centering style only for a single paragraph, you can include the the style rule within the <p> tag.
The margin solution with margin auto is suitable for floating block elements, but if it is only text within normal html you should look at this example here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_text-align_all
you can use all of the following approaches
.One{text-align:center;}
or
.One p{margin: 0 auto;}
You can use the CSS.
margin:auto
your page should have this on it at the top inside the <head> tag
<style type="text/css">
.one p {text-align:center;}
</style>
If you want to center the entire div, and not the text, use this but be sure to set a width for the div.
<style type="text/css">
.one p {margin:0 auto; width:300px;} /*Change the width to what you need to*/
</style>
For vertical alignment, look into http://www.sohtanaka.com/web-design/vertical-alignment-css/
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I want to align middle div tag. I set body and html height 100% and give div property vertical-align: middle but it wont work for me. I google it, most of the example they are using 2 div tag bug in my case I have to use only one div.
body, html { height:100%}
<div style="vertical-align:middle; display:table-cell">middle</div>
Better would be if you use two DIVs:
http://jsfiddle.net/Smr2y/
But here a solution with one DIV:
http://jsfiddle.net/M7Mpm/
body, html { height:100%; display:table;}
<div style="display: table-cell; vertical-align: middle;">middle</div>
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481
I have a tag cloud with different font sizes.
<div>
<a style="font-size:15px;">tag1</a>
<a style="font-size:10px;">tag1</a>
</div>
And it looks like this:
alt text http://img69.imageshack.us/img69/5120/49274398.gif
Now I need to wrap each tag into its own div:
<style>
.cloud {float:left}
.tag {float:left}
</style>
<div class="cloud">
<div class="tag"><a style="font-size:15px;">tag1</a></div>
<div class="tag"><a style="font-size:10px;">tag1</a></div>
</div>
Which puts them all over the place. How to make them look like on the first picture?
alt text http://img26.imageshack.us/img26/7355/12644278.gif
UPDATE: Here is how it looks if I set fixed height for the .tag:
alt text http://img710.imageshack.us/img710/3385/59552565.gif
Replace
.tag {float:left}
by
.tag {display: inline}
Or was there some other reason why you were floating all the tags?
Perhaps increase the line-height or vertical padding of the smaller font-sizes. The reason it's happening is because the smaller ones are wrapping around the larger ones as designed in the specification, so by increasing the size of the area of the smaller elements, the wrapping should be prevented.
As an aside, is there any need to float the tags in the first place? Just putting them all in a row as normal in your first example would seem to have the same effect.
Hallo I have a Floating Div problem, that I can't understand.
If i write a div with float:left property and an Image tag, both are displayed in a line.
e.g
<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width:670px;height:253px;border:1px solid #8E9EAB">
<div style="height:36px">
<div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;">
Frühestes Anreisedatum.
</div>
<img src="calendar_close_btn.gif" style="padding-top:10px">
<div style="clear:left"></div>
</div>
</div>
But as I repleace the image tag with a DIV having the same image as background-image, then both DIV will be displayed on 2 different line. I don't want to use float:left again in second DIV.
img is an inline element (like text or span), so it goes on the same line as any other inline elements (which move to the right if you float a block element to the left).
div is a block element, i.e. each div gets its own vertical space. The only ways to get two divs in one line is:
float them
Make them display: inline