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;
}
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.
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 trying to center a fieldset containing the login "username" and "password" fields to the center of the page. Here is what I have:
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
float: left;
}
I want the fieldset to be centered in the window, regardless of window size. Googling produced nothing helpful, such as float: center or align: center attributes.
There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-block except it aligns them to the direction of the float.
What you want is to set the margins to auto. If you want to center align the nodes inside the fieldset, you can add text-align:center; to this:
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin:auto;
}
The element wrapping it likely needs text-align: center; on it, and then you need to set the margins on the fieldset;
fieldset{
//other stuff
margin: 0 auto;
text-align: left;
}
form
{
text-align: center;
}
Sample: http://jsfiddle.net/CKqxQ/
just remove float:left and add margin: 0 auto; because float:left keeps your element to left of the parent element. (Assuming parent element width is more than 400px;) your new css would be as below.
fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin: 0 auto;
}
You can also put the fieldset like that:
<div style="text-align:center">
.......fieldset here........
</div>
Note: This affects also the alignment of the fieldset text, so if you want the text inside the fieldset to be aligned left or right, you can use:
<fieldset style="text-align:left">
Someone try this... actually,just use this coz it works!
fieldset {
font-size:14px; padding:5px; width:500px; line-height:1.8; margin: 0 auto;
}
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}
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)