I am trying to center a div button and its not working
here is the css
.game-actions{
margin-left:auto;
margin-right:auto;
}
.game-actions a.up {
display: block;
text-decoration: none;
font-weight: bold;
padding:12px 32px;
float: left;
border: 1px solid #c1d9f6;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.game-actions a:hover {
border-color: #80b0ea;
background:#e1ecf3;
}
here is the html
<div class="game-actions">
<a class="up" id="a1" href="#" onClick="toggle(this.value)">Tweet it</a>
</div>
Website is at - http://gibberize.com/
By default, div tags expand their width to the entire width of their parent container. Thus setting their margins to auto doesn't do anything since it just auto-sets both margins to 0. If you set a fixed width for the div then it will center.
By default div elements are the full width of the page and since you aren't specifying how wide it should be the auto margin will be 0 on both sides.
In this case I would use a text-align: center; on the div to center the link.
Here's one solution for you. To your first .game-actions CSS class add:
width:1px;
Also, change the caption Tweet it to:
Tweet it
(to avoid breaking the button over 2 lines)
Related
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
Cheers, I'm making a horizontal link menu.
I made parent div height 46px and would like to achieve anchor padding with 46px height in total.
How do I do that?
<div class="outside">
FCC
</div>
I'd like the green rectangle to fit inside parent div :)
.outside{
width:100%;
height:46px;
background-color:red;
}
.outside a{
float:left;
text-decoration:none;
background-color:green;
padding-top:15px;
padding-bottom:15px;
font-size:16px;
}
There were some similiar questions but none of them included padding (which can be pretty complicated to calculate).
http://jsfiddle.net/T2Nqd/
Note: I'd like the link to stay centered inside padding and to be able too keep his width about 200px or so
Try this
.outside a {
float: left;
padding: 13px 0px;
text-decoration: none;
background-color: green;
font-size: 16px;
}
You may add code of css like this
.outside a{
line-height: 16px;
}
Because the fonts's hight is not only 16px, so padding + fonts'height > 46px, so you just to set line-height to solve this question.
I have a div and I want to align in the center of that div multiple images. All of the images have the same height and width of 16px. The problem is that I can either center them and have the extra space below but when I use the display:block to remove it, they are aligned to the left again. Here's my code:
div which I want to contain the images:
.cell{
position: relative;
float: left;
width: 300px;
min-height: 22px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
line-height: 22px;
font-family: Arial, Verdana;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: center;
margin-bottom: 2px;
margin-right: 2px;
}
The above class has the properties needed in general.
So I want to create a class for the img elements so that they can be aligned one next to each other and all together aligned horizontally.
Any working suggestions?! :)
Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.
http://jsfiddle.net/B6Jsy/
I used a div as a fake img but it should work the same.
<div class="Image">FIRST</div>
<div class="Image">SECOND</div>
.ImageHolder{
text-align:center;
}
.Image{
display:inline-block;
}
I'm working on a browser-compatible navbar with rounded corners using DIVs and rounded images. I had it working perfectly in FireFox, only to discover that IE butchers it (of course).
The only problem I'm having now is getting my content DIV (navBody) to stretch to match the height of the side images. In both browsers now I have this:
http://img80.imageshack.us/img80/5088/40128898.jpg
<div class="navWrapper">
<div class="navLeft"></div>
<div class="navBody">
Login/Register
</div>
<div class="navRight"></div>
</div>
.navRight
{
float: left;
width: 12px;
height: 25px;
background: url('/images/nav/tabright_off.png');
}
.navLeft
{
float: left;
width: 12px;
height: 25px;
margin-left: 3px;
background: url('/images/nav/tableft_off.png');
}
.navBody
{
float: left;
background: #DDDDEE;
white-space: nowrap;
font: bold 12px Verdana, sans-serif;
padding-top: 5px;
overflow: hidden;
}
.navWrapper
{
float: left;
height: 25px;
display: inline;
}
I tried adding 5px padding-bottom to navBody, but this only works on FF and not IE due to box model issues. Setting navBody to a fixed height (tabs should be 20px high) seems to do nothing. Any ideas?
Try adding a
<br style="clear:both" />
To the bottom of the navBody div and see if that helps things.
Not sure why adding a height of 20px in the CSS isn't working (on navBody), that would be my first guess. You could instead try making it height: 25px (to match the sides) but then change the line-height to push your text down (instead of the padding-top).
Another option (that would change the actual design of your nav) would be to set a width on all the nav items. Rendering engines in general prefer to have width set on any floated elements.
Found the issue - FireFox was adding the padding-top (5px) to the 20px height I set to get a total of 25px; IE was not so the height stayed at 20px. Fixed it by making the height 25px by default and compensating in Firefox by cropping out the overflow in the wrapper div.
I have a div with a height of 30px.
I want to add plain text to this div. How can I make the plain text appear on the center of my div?
i.e, the text will be shown 15px under the top of the div.
I tried a label with margin-top: 15; but it didn't work.
height: 30px; line-height: 30px; padding: 0;
Following CSS would work
text-align:center;
vertical-align:middle;
display:table-cell;
You can:
<div style="height:30px; line-height:30px; text-align:center;">
Label
</div>
Set the line-height of the text helps you to fit the height for one line only.
Although this is an old thread, I think a flex solution should also be presented.
If you style your div with
display: flex;
align-items: center;
it should work
Codesandbox
Use padding-top instead of margin-top. Remember that adding padding to the top is added to the height, so you need to reduce the amount that you use for padding from the height. If you just always want for the text to have 15px on top and bottom of it, just simply do:
padding: 15px 0px;
Without specifying height at all.
padding-top: 15px;
remove 15px from the height on the div to.
you should have a look at padding http://www.w3schools.com/css/css_padding.asp
if you want anything to be in center of it's parent, just give the parent specific width using style and give the child style="margin:0 auto".
good luck
The <label></label> Element is not a block level element it is an inline element.
Try this code
<div style="height:30px">
<label style="display:block; margin-top:15px;">
</label>
</div>
#MyDiv
{
background-image: url(images/pagedescription_bar.png);
background-repeat: repeat-x;
border-color: #868686;
border-width: thin;
border-style: solid;
border-style: none;
width: 1008px;
height:70px;
color: #FB8022;
font-size: 16px;
font-weight: bold;
}
#MyDiv label
{
width: 1008px;
text-align: center;
height: 70px;
vertical-align: middle;
display:table-cell;
}