Vertically centering a span in a div - html

I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you

Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)

Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/

use line-height = height:
http://jsfiddle.net/RhNc2/8/

You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}

Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.

Related

my nav bar background isn't in the color even If i specified it [duplicate]

I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:
HTML
<div id="outer">
<div id="left">
...
<div id="right">
</div>
CSS
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?
It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.
You can use the overflow style to make the parent element take the floating elements in consideration:
#outer { overflow: auto; }
There are a couple of solutions to this issue:
#outer: overflow: hidden;
or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.
You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.
My preference is the first one.
Try this:
<div id="outer">
<div id="left">
...
<div id="right">
<div style="clear:both"></div>
</div>
add overflow: hidden; to the main div.
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
overflow: hidden;
border: 1px solid green;
}
#left{
float:left;
border: 1px solid red;
}
#right{
width:500px;
float:right;
border: 1px solid yellow;
}
</style>
You could clear the float by inserting an element after the floated elements that has a clear property applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration.
<div id="outer">
<div id="left">
...
<div id="right">
<div class="clear"></div>
</div>
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
.clear{ clear: both; }
You must also float the outer div.
Div's that contain floatet divs and that are not floated themselves collapse.
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
float:left;
}
#left{
float:left;
width:300px;
}
#right{
width:500px;
float:right;
}
How bout like this:
<style type="text/css">
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
border:thin solid #000000;
height:300px;
margin:5px;
padding:10px;
}
#left{
float:left;
border:thin dashed #000000;
width:385px;
height:100px;
margin:5px;
}
#right{
width:385px;
float:left;
border:thin dashed #000000;
height:100px;
margin:5px;
}
</style>
<div id="outer">
<div id="left">
</div>
...
<div id="right">
</div>
</div>
if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods:
1)make a empty div at end inside parent class it as .blank all following css
.blank:after{
content: "";
clear:both;
display:block;
}
Or
2) give parent a class .clear-fix and add css
.clearfix:after {
content: "";
clear: both;
display: block;
}
it will give parent a height equal to contents

Floating divs wrap even though container no-wrap?

There's some questions about this but I haven't found a good answer. Been looking for a couple hours now.
Here's my jsfiddle:
http://jsfiddle.net/foreyez/Mr2ER/
I have some simple markup:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
and CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Yet the boxes still wrap when the window is small enough. Any suggestions?
Note: I want to keep this float:left, so no inline-block solutions please.
If you add width:600px; to the .container it will force them to stay inline.
Here's your updated JSFiddle
Give #container a width at least as large as the child divs:
.container {
white-space:nowrap;
width:9999px;
}
jsFiddle example

What's the best way to align nested divs to parent divs and text inside divs?

So I made this example here: http://jsfiddle.net/cRmCc/2/ and I was wondering what would be the best way to vertically and horizontally align nested divs inside a parent div with out using margin or padding. More preferably the exact center. I'll be using this as a reference and Google isn't that much of a help. Thanks!
HTML
<div class="container1">
<div class="container2">
Some Text
</div>
</div>
CSS
.container1 {
width:200px;
height:200px;
background-color:red;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
}
You can use display:table-cell; and vertical-align:middle; along with text-align:center; and display:inline-block;
Updated Fiddle
.container1 {
width:200px;
height:200px;
background-color:red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
display:inline-block;
}
Note: You will need a fallback for older browsers, if supported.

Div won't vertically align

<div id='loadingScreen'> has a width of 0 because of the position:absolute and the positioning isn't working because of it. Adding a width of 100% to <div id='loadingScreen'> doesn't solve the problem.
CSS:
#loadingScreen{
position:relative;
}
.centered{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
HTML:
<div id="loadingScreen">
<div class="centered">
<!--stuff-->
</div>
</div>
.loadingScreen
{
display:table;
}
.centered
{
display:table-cell;
vertical-align:middle;
}
When you do position:absolute, you are effectively placing an object "manually" where you want it to be, meaning it shouldn't automatically align itself.
For normal vertical alignment - try line-height:(div-height); inside your css for .loadingScreen.
If your div is part of a table, try vertical-align:middle; instead.
You can do something like this:
.centered
{
height:200px;
border: 1px solid black;
vertical-align: middle;
display:table-cell;
}
Here's a Demo in JS Bin: http://jsbin.com/ireqoc/1/edit

CSS: Setting vertically in middle

Consider following:
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
Left div has less height than the right div. Can I set the left div vertically in the middle of the right div? I can not set the margin-top because the height varies.
Here's the jsfiddle link:
http://jsfiddle.net/k8972/
Hi now used to display inline-block and give to vertical-align and remove to float
as like this
.wrap{
overflow:hidden;
border:1px solid red;
width:250px;
display:table;
}
.left{
width:100px;
height:50px;
background:yellow;
display:inline-block;
vertical-align:middle;
}
.right{
width:100px;
height:100px;
background:brown;
display:inline-block;
vertical-align:middle;
}
live demo http://jsfiddle.net/k8972/2/
You can use display: table-cell and vertical-align: middle; but it won't work on IE7 or less.
Couple of methods mentioned here
http://phrogz.net/css/vertical-align/index.html