This question already has answers here:
Can't Center My Navigation
(2 answers)
Closed 8 years ago.
I'm trying to center this menu. How come i can't center it with the two types of ways i tried to center it? I tried to center it with html and css as shown with comments. I'm just wondering why, I could probably figure it out but it would take me a long time. I know I can fix it with position: absolute;top: 50%;left: 50%; But even that, how do i use that in a good way? how do i use absolute positioning correctly and in a good way? Also what is relative position? What is that used for and how does that compare to absolute? Plz and thank you.
Here's my CSS:
ul {
text-align: center; /* How come this doesn't center it? */
padding: 4px;
list-style-type: none;
margin: 0;
overflow: hidden;
}
li {
float: left;
}
a.menuItem:link,
a.menuItem:visited {
display: block;
width: 120px;
font-weight: bold;
color: white;
background-color: #800000;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.menuItem:hover,
a.menuItem:active {
background-color: black;
}
Here's my HTML:
<center> <!-- And how come this doesn't center it? -->
<ul background="/victoria/cutiepie2.jpg">
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
</center>
A UL element is a block level element, it therefore cannot be influenced by text-align: center which only works on inline elements such as span, strong, em etc. It can be applied to a block so that any textual or inline elements inside it are centered but it will not center the block. A block level element will expand to fill all of the horizontal space therefore cannot be centered without first defining it's width.
A better solution would be to place a width on the menu and then set the horizontal margins to auto:
ul {
padding: 4px;
list-style-type: none;
overflow: hidden;
width: 960px;
margin: 0 auto;
}
Also center tags are deprecated but in their day, they were also used to center text.
Here is a fiddle showing the centered menu: http://jsfiddle.net/7Hjvc/1/
Remove the float:left from your LI, and add display:inline, e.g
li {
display:inline
}
And remove display:block from your links.
The text-align:center on your UL was not centering your LIs because LI are block elements and you were applying a float to them.
Related
"Old" Newbie here. I have not been coding css or html in about 10 years now. Use to be good at it and really like doing it as well. So now during covid and lockdown I decided to get back at it again. Currently just re-learning everything, and trying to build up a website from scratch.
Having some issues with getting menu/navigation links in position on the same line as my h1 title. Have tried about everything, like ex. display: inline-block; and also read a lot of posts here. But nothing seems to be working. So I hope somebody here that have any suggestions?
Thank you so much!
If you inspect the tag h1, you'll see there is a standard margin bottom which the browser applied to h1 tag. You can erase it directly on inspect window, I guess that is your problem. =))
You can try to create a div which contains both your nav items and the header, this should use display:flex and align-items: center, the justify-content will set the horizontal alignment of everything inside this container
Then float the nav to the left, and they should be aligned, from here you can add as much styles as you want
Good luck!
.barContainer {
display: flex;
justify-content: left;
position: fixed;
width: 100%;
align-items: center;
font-family: helvetica;
}
h1 {
font-size: 15px;
}
nav {
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 1rem 1rem;
text-decoration: none;
font-size: 15px;
}
nav li, nav ul {
list-style: none;
}
<div class="barContainer">
<nav>
Item 1
Item 2
Item 3
</nav>
<h1>My Header</h1>
</div>
You can use the float property to float elements within a parent element. Choose right or left to choose which side the element will float to. When this property is used, the display property of the floating elements is ignored when using block, inline, or inline-block.
In the parent element, use the overflow: hidden property, so that it will be at the same height as the largest element contained in it. When a parent element only has floating elements inside it, and does not use the overflow: hidden property, its height will be 0 and the elements below will overlap it.
.content {
overflow: hidden;
font-family: sans-serif;
}
.menu {
float:right;
margin-top: 20px;
}
.menu li {
display: inline;
list-style: none;
margin: 10px;
}
h1 {
float:left;
}
<div class='content'>
<h1>My Title</h1>
<nav class='menu'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
Here is the code
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; /*The problem is here*/
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
In the ul style the overflow hidden is being used. Now when overflow hidden is used the background color of the navigation bar turns to black like
But when I delete the overflow:hidden the background color disappears like
Now basically im just confused because overflow: hidden just hides the overflowing stuff in a container so why here its making a background color appear?
I dont want to know the right solution to this. I just want to know why overflow:hidden is behaving like this.
Because your list items are floated, they do not by default influence the height of their ul parent. The effective height of the list element itself stays 0 here, so you don’t actually see the background color anywhere.
overflow set to anything but the default value auto, acts as a clear fix. That means the li will now influence the height of the ul, and now that the ul actually has a height, you also see its background color applied over that height.
More information on what a “clear fix” is, if you’re not familiar with the term, and what other ways there are to achieve it, can be found f.e. here,
SO question: What is a clearfix?
https://css-tricks.com/the-how-and-why-of-clearing-floats/, https://css-tricks.com/snippets/css/clear-fix/
Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real perpose of the method is that without having given the element a set height and width, when you set overflow to hidden it takes on the height and width of the inner elements : https://codepen.io/Aypro18/pen/ExVVgYa?editors=1000
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto; //The problem is here and the olution itself
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Add display: flex; to ui styles. Now, you can remove overflow:hidden. It is happening because parent element is not acting as container to the children (because of their float property). So, it is not inheriting their height and adjust to it. So, display flex solves that.
Why does the text not get center aligned when placing an image in the li? If I remove the img the text gets centered. I am trying to achieve both being placed centered.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li>
<span class="text">Home</span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
</li>
<li>
<span class="text">News</span>
</li>
</ul>
</body>
</html>
The text-align property is used for aligning elements horizontally, not vertically.
Just change your <ul> element to a flexbox using display: flex; and then use the align-items property to vertically center the <li> items. Similarly, change your <li> elements to a flexbox and use the same property to vertically center the text and the icon.
Also, you need to change your css selector li hover to li:hover.
Check and run the following Code Snippet for a practical example of the above:
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
display: flex;
width: 100%;
height: 50px;
align-items: center;
}
li {color: white;text-decoration: none;
display: flex;
align-items: center;
}
li:hover {background-color: #111;}
<ul>
<li>
Home
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
</li>
<li>News</li>
</ul>
if you want to center the image use :
img{
margin: auto;
}
then center text using
text-align: center;
There are multiple ways that you can achieve vertical and horizontal alignment.
Flex
As #AndrewL64 explained, you can use flex and use the align-items property to center the element. This is the more modern approach and most recommended for creating a responsive layout.
Block
You can set the display property of the element to block and use margin: 0 auto to center the element vertically and horizontally.
Inline-block/inline
Or you can set the display property of the element to inline-block or inline upon which you can use the text-align: center property. It is important to note that this property only acts upon the inner content of block containers and only affects inline or inline-block elements.
This article by Sarah Cope does well to explain the mechanics of such properties
In fact the image is being also centered as part of the text because img elements are displayed inline by default.
Depending on your goal you could have the img on it's own li or position them absolutely like this:
li {
position: relative;
padding-left: 30px;
}
li img{
position: absolute;
left: 0;
}
https://jsfiddle.net/01ecvxfp/
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
That is the list that has the things in it.
nav ul li{
list-style: none;
float: left;
}
nav ul li a{
text-decoration: none;
display: block;
float: left;
padding: 5px 15px;
color: white;
}
Those are the CSS things it currently has, I can't seem to make them be centered. I've looked around for about an hour, but I'm pretty much not having any luck with my current skill in this field.
Flexbox is a good way to make things go where you want.
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
}
nav li {
margin: 0 30px;
}
You want to make the <li>'s line up and sit in the center. First you need to grab their parent (the <ul>) and tell it to use Flexbox.
Flex direction can be row or column. You want them to line up in a row.
Once they're lined up, justify them in the center.
The margin on the <li> itself just keeps them from overlapping.
Using the float: css style directly moves the content to its set side. To center an element, use auto set for your margins or padding. margin-left: auto; margin-right: auto; will center an element within it's container by having the same amount of margin or padding on both sides.
a quicker way to do this is margin: y-margins auto; the first value is your margin-top and margin-bottom values, the second value is your left and right.
to center text within its container, such as a <p> tag, use text-align: center;
I'm doing a work for school and I'm trying to align on center and middle both image and a menu. Here is my code on jsfiddle: LINK I'll post the code here too
HTML
<header>
<img id="logo" src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
<ul id="menutop1">
<li>Loja</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
body{
margin: 0;
}
header{
background-color: #171A21;
width: 100%;
height: 200px;
text-align: center;
}
#logo{
width: 250px;
height: 172px;
}
#menutop1 {
list-style-type: none;
overflow: hidden;
}
#menutop1 li {
float: left;
}
#menutop1 li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menutop1 li a:hover:not(.active) {
background-color: #ddd;
}
The problem is the menu that does under the image and stays on left of the page.
I already tried everything I know and I didn't find a solution, please someone can help me? I realy can't find anything.
Thanks for the help and sorry for my english.
UPDATE
Thanks to the Kamila O the menu is next to the image and now I want center on middle, I added this code:
vertical-align: middle; height: 100%;
on the menu but don't think it is the best soluction becouse when I set a background color on the menu just to test I see this:
LINK
the menu get out of the div. Someone know a better soluction?
If you want to center your menu, you can change #menutop1 li to
#menutop1 li {
position: relative;
display: inline-table;
}
This is because you have added a float: left on the individual list items in the menu.
If you remove that float, make the list items inline-block and add a center text-align to #menutop1, it will align properly.
#menutop1 {
list-style-type: none;
overflow: hidden;
text-align: center;
}
#menutop1 li {
display: inline-block;
}
Updated jsfidle: https://jsfiddle.net/mebxcjwx/4/
I wrote quickly something along the lines of this. I just created containers for your logo + navigation, as this allows for you to control elements a bit better. As well as adding tha tag around your ul element.
<header>
<div class="logo">
<img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
</div>
<nav class="main_nav">
<ul>
<li>Home </li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
https://jsfiddle.net/mebxcjwx/9/
Because they take up the full width of the header by default (If you want you can set this as display: block or width 100%) they will stack under each other, and since they are text elements all that was needed was a simple text align center to get the desired effect.
Im not sure if you wanted the navigation in the black space, if not you could simple remove the padding on the header, and give that navigation a white background or something along those lines to get the effect you desired!