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.
Related
`.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).
So I've got a h3
<h3>someText<h3>
The h3 has a height and a background image
h3
{
height:30px;
background-image:url();
background-reat: repeat-x;
}
now I want the text in the h3 to align to the middle of the element but it always floats the text to the top:
How I can achieve this?
Set the line-height to match the height:
h3
{
height:30px;
line-height:30px;
background-image:url();
background-reat: repeat-x;
}
If your <h3> element contains multiple lines of text, setting the line-height property won't work as suggested by the other answers.
If you do not have to support lteIE7, you can use display: table-cell combined with the vertical-align property:
h3 {
background-color: whitesmoke;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can simply add line-height:30px;
Use line-height to solve this
h3 {
height:30px;
background-image:url();
background-reat: repeat-x;
line-height: 30px;
}
h3 {
...
/* those 2 lines are what you need */
line-height:30px;
vertical-align:middle;
...
}
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?
I have an issue regarding style my blog. I want to make the header bar
position:fixed
The header bar looks like this:
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
But as soon and I do that, 2 navigation bars I made, which are shown as
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
When try to make the headerbar (blurbheader) fixed, when I scroll, it looks like this:
The box on the right hand side is the navigation bar, which won't scroll under the header bar. What do I do?
It is a z-index issue.
try adding the following to your .blurbheader
z-index:1;
and whatever is holding the rest of the page, like the wrapper, add a
z-index:0;
that should fix the problem