So I've been playing around with my code for some time now, and I still am
not able to get the div elements to properly center themselves along the bottom of my canvas element. The code I have so far gets me relatively close, but it is not quite there. I've posted the relative css snippets below, if anyone can give me some direction I would be really appreciative.
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}
Add a container div, also inline-block, and give it text-align: center. This will make sure all your inline-block divs are anchored at the center of the page.
#container {
text-align: center;
display: inline-block;
}
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
text-align: center;
}
<div id="container">
<div id="shapeCanvas"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
</div>
Related
I have created a round shaped bordered button using CSS by this:
.round-button {
display:block;
width:100px;
height:100px;
line-height:100px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
and used it in html5 by this:
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo"></font>
</a>
</div>
Now I want to create a line break inside the round button,
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo">hello <br />world</font>
</a>
</div>
So, the "world" comes out of the round button.
I want both words will be at different line but they both will stay inside the round button window.
As your line-height equals to width in your css, the "world" comes out of the round button.
if you set line-height to 50px, you'll get vertically middle aligned text in the button.
As others mentioned, line-height:100px means each line of text should be 100px tall. That will work to vertically center one line of text (if the container is also 100px tall), but will not work if it is larger than 2 lines of text.
To vertically center the content regardless of how many lines it is, you can use:
display: table-cell;
vertical-align: middle;
Fiddle: http://jsfiddle.net/PDPTV/
(Note: The <font> tag is not supported in HTML5. Moving forward, you should use CSS to specify your font colors. The attribute align=center is also not supported, so you should use another technique to center your content, but that's for a whole other topic on stack overflow.)
The problem is that "line-height:100px;" is pushing the second line down 100px, try this:
.round-button{
display:block;
width:100px;
height:80px;
padding-top: 20px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
You may have to fiddle with the height and padding to get the right offset from the top. Remember that the height excludes padding, so subtract the padding from the height.
Your line-height is 100px. do this instead:
http://jsfiddle.net/VS7sJ/
.round-button {
display:block;
width:100px;
height:100px;
line-height:1em;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
span {
padding:20px 0 0;
display:block
}
line-height:1em and wrap the text with span
<div align="center"> <span><font color="#29966c" id="demo">hello <br />world</font></span>
</div>
its the line height problem.
because the height is 100px and line-height is also 100 px thats the reason it shows out the button.
.round-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
you can also use the given below code to keep the words in center..
.round-button {
display:block;
width:100px;
height:75px;
padding-top:25px;
line-height:25px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
I have a div with text-align:center and 3 spans with text in them. I also have mouse over event that sets padding,background color and border. But when doing it it pushes the other 2 spans. Here is a jsfiddle for better visualization.
http://jsfiddle.net/93EBu/
<div id="div">
<span class="span">Word</span>
<span class="span">Word</span>
<span class="span">Word</span>
</div>
#div {
text-align:center;
}
.span {
margin: 0px 5%;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
You can remove padding: 5px from .spanhover as well as adding border: 1px solid transparent to your span elements:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
border: 1px solid transparent;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
Also, instead of using unnecessary jQuery here, you can make use of :hover selector:
span:hover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
TRY THIS:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
padding:6px;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
DEMO HERE: http://jsfiddle.net/93EBu/1/
The reason you are having this problem is because the padding you are adding to the spanhover class is pushing the elements. So you need to have the span already have the padding as well.... but since you have added a 1px border. You need to make the span padding be 6px... Padding + Border.
When it shows comment, it won't show the comment in the middle of vertical-align.
How can I make it shown in the middle of vertical-align?
This is current output. I want it right in the middle of vertical-align.
Javascript
function showComments(time){
var foundComments = findComments(time);
$.each(foundComments,function(i,comment){
$commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
setComment(comment.message);
$commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
});
};
CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
}
.newsticker p{
height:100px;
float:left;
position:absolute;
}
HTML
<div class="newsticker">
</div>
If its a single line. set the line height to the height of the div.newsticker eg 100px.
For example
font: 16px/100px 'arial', sans-serif
Just update below CSS3 rule to use "table-cell" and "vertical-align" as below:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table-cell;
vertical-align: middle;
}
Also, you need to avoid position:absolute;
.newsticker p{
height:100px;
float:left;
position:absolute;
}
Try a div with display:table and then a div within with a display: table-cell where you want the text. That should vertical align, JS Fiddle is down, so I can't show you an example.
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
display: table-cell;
vertical-align: middle;
}
<div>
<span class="newsticker">
</span></div>
div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}
http://jsfiddle.net/azHVv/22/
I am trying to design a mobile website. Need to get ABC middle vertically. I followed other SO questions reg how to get SPAN text vertically middle. But here its not working. I have included the jsfiddle. http://jsfiddle.net/3tdYT/ I am not sure what I am missing out.
<div id="main">
<div id="header">
<div id="logo"><img src="http://placehold.it/72x38"></div>
<div id="menu">a</div>
<div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>
</div>
<div id="company-name">CCCCCC</div>
</div>
* { margin:0; padding:0}
#header{
height:53px;
padding:0;
}
#logo{
float:left;
background: #ffffff;
padding:5px;
}
#title{
text-align:center;
height:100%;
margin:0 auto;
}
#title-wrapper{
height:100%;
background: #ff3eae;
}
#screen-title{
vertical-align: middle;
display: inline-block;
}
#menu{
width:20%;
height:100%;
float:right;
padding:0;
background: #E23222;
}
#company-name{
width:100%;
float:left;
background: darkblue;
clear:left;
padding:0px;
color: #ffffff;
text-align: center;
}
#main {width:240px}
Turn #title's display into a table and #screen-title's display into a table-cell:
/* ... */
#title{
display: table;
height:100%;
margin:0 auto;
}
/* ... */
#screen-title{
vertical-align: middle;
display: table-cell;
text-align: center;
}
http://jsfiddle.net/XMcCR/3/
But notice that there are lots of possibilitis to vertically center some text with css, each with its own specific disadvantages. This is just one possibility. Simply check some of the results of a quick Google search for "vertically center css". It almost appears to be some kind of own scientific field.
It seems that you have to set a static height and width for it.
That should work. have a try)
#screen-title{
display: table-cell;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
Add line-height: Xpx where X is a suitable value to get the effect you want (typically the same as the height of the element)
<div style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
<div class="div4">Div 4</div>
<div class="div5">Div 5</div>
</div>
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
width:100%;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container .div1
{
background-color: black;
background-position:left;
float:left;
width:20%;
margin: 0px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-left-radius: 20px;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
margin:0; padding:0;
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-right-radius: 20px;
}
.container .div5
{
background-color: black;
float:left;
display:inline-block; width:90px;
width:20%;
margin:0;
}
There are several things I cannot get to work simultaneously:
Make the header span 100% of the page width.
Make div 2 and 4 a set width of 30px each.
Make div 3 a set width of 400px.
Make div 1 and 5 fill the remaining space regardless of how big the window is.
Center everything so it looks nice.
Make the background align correctly.
Does anyone know how to do this? http://jsfiddle.net/jaTuu/
As far as I can tell, you solved 5 on your own, and as far as I know, without extraneous stuff, you need Javascript to do number 4. I cannot attempt 6 without access to your images. Nevertheless, I think you can resolve that on your own.
Below is the solution I came up with given your code:
<div id="header_container" style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div>
*
{
padding:0;
margin:0;
}
#header_container {
background-color: #000;
min-width: 100%;
}
.width30 {
width: 30px;
}
.width300 {
width: 300px;
}
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container
{
text-align:center;
}
.container .div1
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
display:inline-block;
background-color: yellow;
width:90px;
border-bottom-left-radius: 20px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: purple;
display:inline-block;
/*width:90px;*/
margin:0; padding:0;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: green;
display:inline-block;
/*width:90px;*/
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: blue;
display:inline-block;
/*width:90px;*/
}
.container .div5
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: orange;
display:inline-block;
width:90px;
border-bottom-right-radius: 20px;
}
A couple things to note here:
Assuming that you want the element names to remain distinct, you can modify the width of the items by adding classes which define sizes as per the above. If you do so, as I did, you will have to remove the widths of the elements as you define them in the CSS (also shown above).
One more note: it seems as though you are attempting to do a navigation menu. If that is the case, it may be a better idea to use lists to represent the items.
Try to centering all background images.
background: url('http://www.imgur.com/YLVpI.png') center center;
Like this demo: http://jsfiddle.net/ongisnade/PThcc/