Like the title, I want to vertical align center a <a> inside <ul><li>. Here the jsfiddle
Due to the fact you are specifying heights on both elements, this can easily be achieved by adding margin-top: 0.5em to a.
Like This
This is because the li has a height of 3em, the a has a height of 2em, so it needs half an em at the top to look vertically centered
Change the line-height of the a to match the line-height of the li.
a {
/*...preceding styles */
line-height: 3em; /* Elements line-height set to match parents */
height: 2em;
width: 5em;
text-align: center;
}
OR
Set the property vertical-align:middle on the a.
a{
/*...Other styles ommitted*/
vertical-align: middle;
}
Example http://jsfiddle.net/gvTLw/5/
You need to change the height and line-height of the a element to match the height of the li:
li {
height: 3em;
}
a {
line-height: 3em;
height: 3em;
}
Similar to Kevin's response, setting line-height on the anchor to inherit will do the same thing, without having to match the value manually
Fiddle
Related
this is my css:
body {
margin: 0px;
background-color: white;
}
#navbar {
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}
#navbar a {
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
navbar is a div inside body and i have a couple of tags inside navbar.
this is the output:
there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.
Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!
div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}
In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!
I figured it out, I just needed to use: display:inline-block;
you can try like this: Demo
#navbar a {
display:block;
float:left;
}
I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.
Here is a fiddle: http://jsfiddle.net/RQ69r/1/
Thanks in advance.
You can fix that adding the following style to the inline-block element:
vertical-align: middle;
Demo
Why dont you change it to display: block; ?
Check the updated fiddle:
http://jsfiddle.net/RQ69r/3/
When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;
This is the default behavior of inline-block elements. Set the parent div font-size: 0px;
DEMO http://jsfiddle.net/RQ69r/7/
.row_20 {
width: 20%;
font-size: 0px;
}
And set the correct font-size of the child element
.header .logo {
font-size: 13px; <-- set font size
height: 45px;
width: 100%;
display: inline-block;
background: blue;
}
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
I'm getting some problems with vertical aligment.
I want to put my <span>›</span> element centralized in vertical.
http://jsfiddle.net/vpVEf/
Is there a way to centralize it automatically as the "li a" in this example? Note that the a element is centralized without using line-height.
http://jsfiddle.net/vpVEf/9/
The reason this is happening is because the a tag has a padding, pushing down everything in it by 12px.
Remove the top/bottom padding and use line-height to make it 68px tall.
padding: 0 12px;
line-height: 68px;
It might not look like it, but this does fix the problem. Remove all formatting from the span to see! But now the issue is that the text isn't aligned center within the span. You can use line-height on the span to adjust that as well.
line-height: 55px;
Seems to work well.
DEMO
Try using line-height to adjust the vertical alignment on your span:
#MenuEventos li span{
position: relative;
float: right;
font-size: 3.5em;
color: white;
font-family: serif;
font-weight: bold;
margin: auto 0px auto 0px;
line-height: 44px; /* Adjust this as needed */
}
Example: http://jsfiddle.net/vpVEf/1/
Take the line-height: 2.8em; that you have in #MenuEventos li a style and move it to the #MenuEventos li style.
See this jfiddle: http://jsfiddle.net/zFnJb/
You need to make <a> element floating left and <span> element floating right.
What is the easiest way to align the text vertically here with CSS ?
<ul>
<li>Hello</li>
<li>Bye Bye</li>
<li>Ciao</li>
</ul>
li {
border: 1px solid black;
width: 100px;
height: 50px;
margin-bottom: 20px;
text-align: center;
}
If you have just one line of text, you can set the line-height to the same value as the height. This works for any element.
Hacky, but possibly the easiest way:
li {
display: table-cell;
vertical-align: center;
}
You will need to add a background image in place of the list item bullet.
If you know you're always going to center a single line you could match height and line-height
li {
...
height: 50px;
line-height: 50px;
...
}
Try the vertical-align property:
http://www.w3schools.com/css/pr_pos_vertical-align.asp
Putting a line-height and making a gap between text and the border is good. but this is not the best practice. because Line height is not for creating a margin or padding. It is for creating a gap between two text lines(gap between two lines of a paragraph).
So make your task is done, you have to put a margin or a padding. The better option is putting a margin( But this is not a alignment. Just putting a margin to top ). And also, put your text into a "p" tag or "span" tag( whatever a tag, which can use for wrap text ).
HTML code,
<ul>
<li><span>Hello</span></li>
<li><span>Bye Bye</span></li>
<li><span>Ciao</span></li>
</ul>
CSS Code,
ul li span {
margin-top: 5px;
}
If making verticaly align is must, Here is the code.
ul li {
position: relative;
}
ul li span {
position: absolute;
top: 50%;
font-size: 12px; /* change this as your need. */
line-height: 12px; /* keep this value same as font-size. */
margin-top: -6px; /* half value from the font-size. */
}