I'm trying to make a bar on the top of the page, but am unsure of how to make all links fall on the same line.
This is what I have:
#tb {
list-style-type: none;
position:relative;
margin: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block;
width: 60px;
}
<div class id="tb">
Home
News
Contact
About
</div>
I've tried removing many combinations in the CSS, but so far nothing. If the answer is incredibly obvious, please excuse my ignorance, as I am new to CSS.
Thanks,
-Tysuna
You've set a width on #tb which is causing the as inside it to wrap to new lines. The a tags will automatically be placed on the same line as they are classed as inline elements.
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).
(http://www.w3.org/TR/CSS21/visuren.html#inline-boxes)
Removing the width will allow the div to fill the entire width of its container (as it is a block element).
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
(https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements)
As #tb is now as wide as the body the a tags will be on the same line, only wrapping if the window size is decreased enough.
#tb {
text-align: center;
}
<div class id="tb">
Home
News
Contact
About
</div>
Your CSS in this particular example can also be simplified as many of the properties specified are already defaults, not applicable or would have no effect.
Update: specifiy for a-tag separatly, isntead of inheritance
#tb {
list-style-type: none;
position:relative;
margin: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block; /*property will be inherited by 'a'-tag elements too*/
width: 60px;
}
#tb a{
display: inline-block; /* specifiy for a-tag separatly*/
}
<div class id="tb">
Home
News
Contact
About
</div>
You can use some flexbox magic:
#tb {
display: flex;
justify-content: center;
}
<div class id="tb">
Home
News
Contact
About
</div>
Check the below code.
You can use explicitly display:inline-block or display:inline to make any element to stay in the same line.But Here if you remove the width thats enough.
Instead of div structure better use ul which will make your job easier.Bydefault it will align in a line.
#tb {
list-style-type: none;
position:relative;
margin: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block;
}
<div class id="tb">
Home
News
Contact
About
</div>
remove width: 60px - #tb
use ul li and display: inline-block for li
#tb {
list-style-type: none;
position:relative;
margin: auto;
padding: 0;
text-align: center;
display: block;
}
#tb > li{
display: inline-block;
vertical-align: top;
margin: 0 5px;
}
<ul id="tb">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
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>
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/
I have a DIV at the top and a few anchors. First is styled with a logo and the rest are text. The styles I've set are as follows.
div.nav-top {
height: 120px;
vertical-align: middle;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
width: 200px;
height: 40px;
display: inline-block;
}
a.nav-link {
vertical-align: middle;
}
However, these elements are not centered in the div. The alignment seems to follow the image, which is at the top. The text gets in the middle relative to the image. It's not a bad idea but I need the whole system img-a-a-a-a to be centered vertically. At the moment I pad it but as soon as the height of the outer DIV changes, everything breaks.
What am I doing wrong?
(I've found this post but here they apply tables and such. Doesn't seem like the most appropriate solution. Perhaps I'm mistaken?
Using Flexbox
nav, .menu {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
}
li {
padding: 0 5px;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Using CSS Table
nav, .menu {
display: table;
}
.logo, .menu {
display: table-cell;
vertical-align: middle;
}
li {
padding: 0 15px;
display: table-cell;
vertical-align: middle;
}
<nav>
<div class="logo">
<img src="http://placehold.it/150x50">
</div>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
You can refer to this blog, where the owner describes centering issues. He started 2001 but be aware that the last update's been made last summer, and I admire his persistence. He presents clear examples on how to center in the different versions of CSS.
In your case, I'd suggest that you use display: flex like so. Note that the whole centering magic's done from the containing control and imposed on the underlying children. There's actually no need to style nav-link at all (see remark below the example, though).
div.nav-top {
height: 120px;
background-color: purple;
padding: 10px;
display: flex;
align-items: center;
}
a.nav-logo {
background: no-repeat url(Logo.png);
background-size: 200px 40px;
background-position: center center;
width: 200px;
height: 100%;
}
a.nav-link { }
That's a new thing in styling and recently implemented. The disadvantage of that is that older browsers might have problems rendering it. But the upside is that it's much more intuitive to the designers (and fetching a decent version of a browser is not a far reach, unless managed centrally by the corporate).
You might want to use margin for the anchor controls, as they're going to be squashed toghether. Also, the sizes and fonts will need adjusting. If you do that, you'll probably end up needing the style which I suggested wasn't needed but that's specifics only you're aware of.
a.nav-link {
margin: 10px;
font-size: 20px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
It's always a good practice to control height with paddings instead of a fixed height and margins to center. So, keeping that in mind:
Wrap the div with the logo and the div with the anchortags as children of a container div.
give the purple box there (or whatever it represents the corresponding padding top and bottom to center that parent div you created inside.
.purple{
background:purple;
width:400px;
display:inline-block;
padding: 20px 15px;
height:auto;
}
EDIT
or, if you MUST have a fixed height on the parent;
.purple{
background:purple;
width:400px;
display:inline-block;
height:60px;
padding: 0px 15px;
}
See this demo
You can wrap your elements into a div and use margin: 0, auto; for the elements and the inner container as well.
Use display: flex: in the div above the text then just repeat from there
div {
display: flex;
justify-contents: center;
align-items: center;
}
Not an elegant solution, but if you make a table with the text in one cell and the image in the next cell it's aligned in the middle.
I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.
here is my code:
CSS:
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>a {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
color:#47c9af;
height:30px;
text-decoration: none;
}
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
HTML:
<div class="container">
<ul class="list">
</li>
<li></li>
<a href='#'><li><h1 >Header Of My Blog </h1></li></a>
<a href='#'><li><p>SubHeader</p></li></a>
<a href='#'><li><h3></h3></li></a>
</ul>
</div>
The result is something like this:
As you can see logo is not in order with other elements, what should i do?
Thanks.
Fixing the Alignment
To fix the alignment you simply need to introduce the vertical-align property to align everything to the top:
.list {
...
vertical-align: top;
}
Making your HTML Valid
A problem with your markup is that ul elements must only contain li children. Your current ul element has a children which have li elements inside them - this is invalid. Wrap your a elements within the li elements instead:
<ul>
<li>
<a></a>
<li>
</ul>
Making your HTML Semantic
You need to ask yourself some questions about your current markup:
What is this a list of? Why are you using the ul element instead of the header element?
Why are you using a p element as a "SubHeader"?
First, let us rearrange your HTML, so the code is valid. A list (ul) has list-items (li). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.
Then we'll need to change the CSS a bit, so the anchors get the right color.
But the most important thing is the vertical alignment of the table-cells. By adding vertical-align to the list items, they'll be in the right alignment.
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>li {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
height:30px;
vertical-align: middle;
}
.list li a {
color:#47c9af;
text-decoration: none;
}
<div class="container">
<ul class="list">
<li><img src="http://placehold.it/150x75" /></li>
<li></li>
<li><h1>Header of my blog</h1></li>
<li>Subheader</li>
<li><h3></h3></li>
</ul>
</div>
You can define your .list>a and img tag vertical-align:top;
.list>a, img{
vertical-align:top;
}
.list > a {
vertical-align: bottom;
}
as you have wrap everything inside the anchor tag, we should target the a tag
here's a Jsfiddle
The html
<div class="wrapContent">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
.wrapper is a fluid div, I am trying to center the floated left lists on the page. Basically be able to have same distances left/right for the first and last li in the ul.
Currently I do:
.wrapContent {
width: 100%;
margin: 0 auto;
}
.ul {
width: 100%;
margin: 0 auto;
}
.li {
width: 250px;
margin: 0 auto;
float: left;
}
Don't float them. (That's kind of an important detail you should've included in your question... :)) Use display instead.
ul {
text-align: center;
}
li {
display: inline-block;
text-align: left; /* optional */
}
Now the lis will each act like inline elements, but preserve the structure of their contents, and you can center them like anything else.
By the way, you don't need to use width: 100%; on block elements; they automatically expand to fit the width of their container.