I'm having difficulty centering my navbar. I've tried replacing "block" with "inline-block" in certain areas that didn't lead to any success. I've also tried "text-align: center" as well but that's not working.
I tried "text-align: " left, right and center but it doesn't change at all anyway. Am I looking in the right spot?
Everything else is functioning as intended so I'm scared to touch anything.
Here's the jsfiddle.
#navbar ul li a, .dropdown-toggle {
color: white;
text-align: center; /*doesn't seem to do anything*/
padding: 14px 16px;
text-decoration: none;
display: inline-block;
}
The trick to centering elements with text-align: center is two-fold:
1. Declare display: block and text-align: center on the containing parent element
2. Declare display: inline-block on the nested children elements
You can center any inline-block element this way using text-align: center if the parent element is a block element.
What you will need to adjust your styles accordingly:
#navbar ul:not(.dropdown-menu) {
float: none;
display: block;
text-align: center;
}
#navbar ul:not(.dropdown-menu) > li {
display: inline-block;
float: none;
}
An important factor to consider anytime you need to align an element is to keep a look out for float rules, they will negate any attempt at aligning elements using display rules.
Fiddle Demonstration:
https://jsfiddle.net/kbuoL6sm/6/
Try margin: 0 auto; on the #navbar
Or, on the parent of the #navbar try text-align: center;
If it needs something more than that, css-tricks has a great guide here for centering just about every condition:
https://css-tricks.com/centering-css-complete-guide/
Related
I have an inline-block menu (made with bootstrap 3) and I want to know if it's possible to center align any content that wraps?
Here's a codepen highlighting the issue
http://codepen.io/Kathrynwatts/pen/VebjzW
As you can see, when you downsize the screen, all the list items align to the left (which is default wrapping behavior). I'd like them to wrap to the center, if I can.
CSS
.plays-nav { //parent container
font-weight: 400;
letter-spacing: 3px;
}
.plays-nav>li { //menu list items
text-align: center;
}
.navbar-centered .navbar-nav { //parent container
float: none;
text-align: center;
}
.navbar-centered .navbar-nav > li { //menu list items
float: none;
}
.navbar-centered .nav > li { //menu list items
display: inline-block;
text-align: center;
margin: 0 auto;
}
If you text-align:center the parent, display:inline-block children will stack in the middle and wrap. Subsequent rows will also be center aligned. So this will do it:
.plays-nav {
text-align: center;
}
Note: When using this solution make sure the left and right paddings on the parent are equal and no floats are set on children.
change the code comment //parent container to /* parent container */.
Your code is correct, but the comment format is wrong, CSS comments must be the formatted as /* comment content*/, otherwise the code after your comment might be affected.
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
I cant figure out why my list is not vertically aligned. I set ul and li to be 100% height of parent, but it seems to be only 100% of itself.
I dont want to use any margin or padding to make them vertically aligned. How can I force it to be 100% of parent so it would be vertically in the middle?
http://jsfiddle.net/qS5A6/
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; //add this
}
defining your height relative to the parten usually just works with elements that have position:absolute. The reason is, that the height of surrounding elements is usually determined by their children. If you make the childrens height relative to the parent you have an endless loop :)
So using this code would make your li have 100% height but the height of your #nav won't change anymore with increasing length of the ul.
http://jsfiddle.net/qS5A6/5/
Using display: table instead of your inline-block approach would keep that functionality
http://jsfiddle.net/qS5A6/6/
Maybe you can use table-cell for li:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
this works fine for ie8+
if you use:
#nav li a{
line-height:90px;
}
there is some problem, you can't have more, than one line in the tag
Heres my problem: I want to center an <a> tag inside of a <div> that already has text-align applied to it. I've found a way to solve my problem by wrapping the <a> tag with 'span' tags. Is there a better way to do this, i.e. without the extra <span> tag?
Here is a fiddle that describes what I'm talking about: http://jsfiddle.net/8VhQg/3/
As you can see, I've solved the problem at the bottom, but what is it about the <a> tag that won't let it work by default? Even changing the display didn't seem to work:
a {
text-align: center;
display: inline;
}
a {
text-align: center;
display: inline-block;
}
a {
text-align: center;
display: block;
}
I would prefer not to remove the text-align from the <div>, I'm mostly curious as to why the <a> tag prefers the parent CSS instead of its own ID.
Thanks in advance.
The Fiddle you've posted isn't valid because of your reuse of IDs, you should use classes instead.
However, that aside, the easiest way to make your anchor centre-align is to set it to display: block (which will mean it automatically takes up any horizontal space available to it), and then text-align: center.
Thus, you get this:
div{
text-align: left;
}
div a{
display: block;
text-align: center;
}
create 3 classes. They have to be displayed as block to add alignment.
.left{ text-align: left; display: block; }
.center{ text-align: center; display: block; }
.right{ text-align: right; display: block; }
Then apply that directly to the A tag
this is left
this is center
this is right
I think this is easiest
You forgot to give class center and left to <a>.
IDs must be same. Use class instead.
Change
<h2>Align Links</h2>
Right Align Link<br/>
Center Align Link<br/>
Left Align Link<br/>
to
<h2>Align Links</h2>
Right Align Link<br/>
Center Align Link<br/>
Left Align Link<br/>
Updated fiddle here.
Is there any way to align the images vertically in LIST ITEM using CSS only?
The I have a slider (slowed down) that needed to be aligned vertically in a 500px-height LI
The site is in http://210.48.94.218/~printabl/design/portfolio/.
Your help is greatly appreciated.
Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.
Example:
ul li {
display: block;
height: 500px;
line-height: 500px;
}
ul li img {
vertical-align: middle;
}
Working example here.
This is a use case for Flexbox:
ul {
display: flex;
align-items: center;
}
(use vendor prefixes where necessary depending on your browser; see http://caniuse.com/#feat=flexbox)
And then remove height: 500px from .soliloquy-item.