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;
...
}
Related
I have a jsfiddle here - https://jsfiddle.net/z9ptvz87/
I'd need the headings to have a background color and same padding on all sides.
I sort of have ot working here but it's with line-height to get it working. Without line-height it looks like this.
https://jsfiddle.net/z9ptvz87/10/
Is there a better way to do this and have padding on the left and right of the text.
*{
font-family: sans-serif;
}
.block{
margin: 50px;
width: 400px;
}
.block span{
display: block;
}
h1, h2{
background: red;
display: inline;
padding:10px;
line-height: 2em;
}
Did you consider h1, h2 { display: inline-block }? Seems to solve both your issues, if I've understood them correctly.
See https://jsfiddle.net/h7kd9yq8/
if everything's fixed, you can always wrap the content for the different lines inside span tags and style them
<h2>
<span>Sub heading Sub heading Sub</span>
<span>heading Sub heading Sub</span>
<span>heading Sub heading</span>
</h2>
and then in the css
h1 span, h2 span {
float: left;
clear: both;
padding: 10px;
background: red;
}
https://jsfiddle.net/z9ptvz87/14/
not sure if that's what you wanted to achieve.
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 have set the property of link as follow
.heading-text a
{
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
to make the height of the link as per it's parent div but it's not working
when i have set following property
.heading-text a
{
padding:11px 0px;
}
then it work properly is there any way in css by which i can increase the height of the area of the link without padding
Request to give answer as soon as possible
add this to your css :
display: block;
Try to add the following to your css:
display: inline-block;
In difference to "display: block;", this has inline too, means you can define the size but the element is still inline as before.
<a> tags are inline by default. Change it to block:
.heading-text a
{
display: block; /* Add this */
font-family: verdana;
font-size:12px;
color:#124253;
width:100%;
height:40px;
text-align: center;
cursor: pointer;
}
Here is an example fiddle.
Use any one or both of this-
display: inline-block;
or
float:left; /*or right*/
I am applying dynamic classes "float-left", "float-right" and "float-center" to the Lists to position them properly where I want, but for centering as there is no float:center; I tried with margins, inline-block; text-align:center.. but nothing works.. please check this fiddle
ul.tabs .center {
margin:0 auto;
text-align:center;
overflow:hidden;
}
.float-center li{
display:inline-block;
}
http://jsfiddle.net/443E2/
Use the following code:
.float-center {
text-align: center;
}
.tabs.float-center li {
display: inline-block;
float; none;
margin-left: -4px; /* Fix for white spaces between li while using inline-block */
}
.tabs.float-center li:last-child {
border-right: 1px solid #999;
}
See the update jsfiddler
Check this fork - http://jsfiddle.net/GzS7X/
I changed this to centre the content of the <li>:
.tab_content {
padding: 20px;
font-size: 1.2em;
text-align:center;
}
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 !