`.history-bar{
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:16px;
width:472px;
vertical-align:middle;
color:black;
}`
I read that line-height should be the same height of a div, to vertical-align:middle;
This div has 35px height but 16px line-height.
Is there any way to middle align this div ?
Use display: table-cell; with vertical-align: middle; to vertical align the text.
.history-bar {
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:16px;
width:472px;
color:black;
background: #eee;
display: table-cell;
vertical-align: middle;
}
JSFiddle demo
You can remove the vertical-align property from your CSS, and yes, you can change the line-height to be the same as the height, like so:
.history-bar {
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:35px;
width:472px;
color:black;
border: 1px solid; /* added so you can see it's position */
}
Here's a JSfiddle of the code above.
If you didn't set an explicit height, then you could manage the text's position via padding in the parent container, as well as margins (say if you used a <p> that had margin-bottom applied).
Related
I'm using floats and trying to keep each one of three buttons in a navigation menu to ~33.3% so that it fills the screen and doesn't break when the window size shrinks, nor should it leave gaps on the ends when the browser window gets wider.
Here is a fiddle http://jsfiddle.net/xxd1vdcj/1/
<div id ="nav">
<ul>
<li id="dawn" >Tradition</li>
<li id="dusk" >Styles</li>
<li id="night">Contact</li>
</ul>
</div>
#nav ul li{
display:block;
//width:19.3%;
width: 33%;
line-height: 3em;
margin:0 auto;
padding:0;
text-align:center;
float:left;
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
color: #b0c4ff;
font-size: 18px;
margin-top: 140px;
opacity: 1;
border: 1px solid black;
}
As I've said in my comment, <a> is not a valid <ul> children.
100/3 = 33.333.. but you used 33% which on larger screen sizes encounted for the 1px (up to 6px) for your three LI widths, than once you resized your page, the remaining availiable width % was not enough to contain the fixed (1px) border width, leading to a LI breaking beneath to the nearest available space.
using box-sizing
Some box-sizing will fix your issue of borders adding up the available space.
*{margin:0; padding:0;} /* Global reset (also to remove 8px margin from Body) */
#nav ul{
display:block;
margin:10px;
margin-top: 140px;
}
#nav ul li{
box-sizing:border-box;
border: 1px solid black;
display:block;
float:left;
width: 33%;
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
http://jsfiddle.net/xxd1vdcj/5/
Now you can even go using 33.333% for your LI width.
using display:table and table-layout
Since box-sizing is not supported by older browsers you can go and use this simple solution:
*{margin:0;padding:0;}
#nav{
margin:10px;
margin-top: 140px;
}
#nav ul{
display:table; /* Table!! yey */
width:100%;
table-layout: fixed; /* To fix LI widths */
}
#nav ul li{
border: 1px solid black;
display: table-cell; /* Note */
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
which excels at what tables are born for!
http://jsfiddle.net/xxd1vdcj/7/
I want align the content in middle of the background image in css.
I was used the code like
section.center_content {
background: url(../images/center_bg.jpg) center no-repeat;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
background-size:100%;
height:190px;
}
.ticker-content {
vertical-align:middle;
}
.ticker-content h1 {
color:#FFFFFF;
font-size:45px;
}
.ticker-content h2 {
color:#BFBFBF;
font-size:35px;
}
.ticker-content p {
color:#BFBFBF;
font-size:20px;
}
Please give a solution. thanks a lot in advance
Add the following properties to your section.center_content:
section.center_content {
background:blue;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
height:190px;
width:100px;
/*Vertically center*/
display:table-cell; /*This makes the div behave like a table cell*/
vertical-align:middle; /*This property is only available on table cells*/
/*Horizontal center*/
text-align:center; /*This you know centers text horizontally*/
}
.ticker-content{
/*Remove vertical-align:middle; from here*/
}
DEMO
P.S. And keep this wonderful article for future reference.
The css property vertical-align applies to inline elements and table-cell element.
So add a display:table-cell to your element to be align in the middle.
You can always use line-height property that equalls to the height of the container that it is.
i want to center one button up and the other down. how can i edit my css to achieve this.here is
css-
#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
html-
<div>
send
clear
</div>
Here's a jsfiddle with what you want.... http://jsfiddle.net/xgdVM/
you can set the text-align of the container to center
and set the display property of the buttons to block..
CSS:
#form{text-align:center;}
a{display:block;}
HTML
<div id="form">
send
clear
</div>
OR if your buttons have a set witdth i.e width:70px; then you can just give them the css property margin:0 auto; and they will be centered by applying equal margins to the left and right
http://jsfiddle.net/xgdVM/2/
If you mean center horizontally:
#ContactForm .button {
margin: 0 auto; /* centers, provided there's a width set */
display: block;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px; /* width set */
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
I want to create a keyboard as seen on image:
The keys should be span objects. I have this CSS:
span{
height:25px;
width:25px;
float:left;
margin:0 5px 5px 0;
line-height:25px;
background-color:WhiteSmoke;
text-align:center;
font-size:14px;
border-style:solid;
border-width:1px;
border-color:silver;
}
... and I get this result:
It's almost OK but I don't know how to position the spans properly?
You need to set a width and a text-align:center on the parent element, and ditch the float
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach