I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
Related
Background:
I have created a ul menu that contains 2 divs -> one div for the icon, second div for the text. Reason for the divs is that I want the text to be neatly vertically aligned, which otherwise wouldn't be the case.
Problem:
I managed to make the whole second div clickable with display: block; but I struggle to expand the link beyond the div so that it stretches over the entire li, i.e. also covers the first div.
Attempts:
I already tried using Bootstrap's .stretched-link on the href tag (see first link) and setting position: relative; to all divs and li. However, this didn't work.
Question:
Is it somehow possible to expand the link across the entire li, while keeping the divs to neatly align?
Note:
(a) I'm aware that one work-around would be to place the href tag around the li, but I understand this isn't good practice anymore.
(b) Just to show the alignment problem, I have created a second JSfiddle, when the divs are removed.
JSfiddle
(1) divs included, but icon div not clickable: https://jsfiddle.net/AlphaX/z5f60m23/11/
(2) divs removed and whole li is clickable, but text isn't vertically aligned because font awesome icons have different widths by default: https://jsfiddle.net/AlphaX/89a1x7gs/2/
Just do your second approach, with the <a> wrapping the <i> and the span, and add some additional style rules:
li i {
width: 20%;
display: inline-block;
}
I edited your Fiddle too: https://jsfiddle.net/uxnfvzyc/1/
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
http://jsfiddle.net/antonpug/jfrNt/
I am trying to make all the buttons the same size, and I am setting width to 100, but it doesn't do anything. Ahh! So frustrated...
modified a bit,
you need to use percentage and set it in the <li>
make the <a>'s display:block to fill in the whole <li>
added box-sizing:border-box (CSS3) to include the border in width calculation
replaced display:inline with float:left. elements styled with display:inline CANNOT have dimensions (width and height) and top and bottom padding and margins will not move it away from the text baseline (not move it vertically). Elements floated left seem to automatically have display:block
changed IDs to classes since IDs can only appear once
You're setting width:150px on the #menu_item declaration which is targeting the id of menu_item. For one, you can't have more than one element in a page with an id="menu_item" attribute.
What you need to do is set the tag inside those divs to display:block as it is by default an in-line element, then you can specify a width on it.
Don't use the same ID multiple times.
You can't set a width or margin on inline elements.
Here's an updated jsFiddle with the following changes:
Changed to .menu_item class.
.menu_item is now display: inline-block.
.menu_item a is now display: block.
I'm not sure if the margin on the top is supposed to be there, but you can remove that if you want.
This works if you want fixed widths, JSFiddle
had change your divs to use class not id,
.menuitem is now display: block and float: left;
.menu has a min-width to prevent wrapping of the menu items.
http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.