I have a navigation menu (header menu) in my web page which is actually takes dynamic content. The dynamic menu items are loaded into ul>li>{dynamic_content}. I want this navigation bar (I mean the ul ) in the center of the section, not vertically but horizontally. I can have text-align:center because it has multiple children tags.
Also I can't do the following,
.class{
width:50%;
margin-left:auto;
margin-right:auto;
}
because I can't set a width since this is a DYNAMIC navigation.
You may think why I can't try
.class{
position:absolute;
left:50%;
transform:translateX(-50%);
}
This is also can not be done, because I can't set the position:absolute since it's going to be a fixed header on scroll. It make some position problems in responsive.
I'm looking for an alternative to solve this problem.
You can use justify-content: center from flexbox.
.container {
display: flex;
justify-content: center;
}
<div class="container">
<span>Title 1</span>
<span>Title 2</span>
<span>Title 3</span>
</div>
Using flexbox to center the list on the page will work.
nav {
width: 100%;
display: flex;
justify-content: center;
}
ul {
margin: 0;
display: flex;
list-style: none;
}
li:not(:last-child) {
margin-right: 1rem;
}
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
If you are looking for old browsers support, another option would be using display table as it is explained here
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
I think I figured it out a new way to align contents Horizontally.This works nice to me and have no issue with browser compatibility.
Wrapped the navigation with a div and set text-align:center and added display:inline-block to the ul that I wanted to center.
div {
text-align: center;
}
ul {
display:inline-block;
list-style-type: none;
}
ul>li{
float:left;
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Related
I am trying to center just 2 elements in the center of a page. This is a page with clickable icons for your social links. But I need to find a way to center them in a way that they are centered no matter the device's size. Please bare in mind this is my second day ever developing. Any feedback is highly appreciated!
Here is what it should look like in the end
Here is the code I have
<div class="fresh">
<img width="160" src=logo.svg>
</div>
<div class="icons-inline">
<ul class="icons">
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
</ul>
</div>
css:
.fresh {
color: #E3EEF8;
text-align: center;
padding-top: 20%;
}
.icons {
text-align: center;
padding-right: 1.5%;
}
I'm currently just using text-align and then setting the padding to 20% on the top text so that it pushes both of them down and appears centered only on MY specific screen. But I want it to work on phones, other monitors, etc.
use flex-box, try this:
You can skip the * {...} since it will override every element in your document, and you'll have to set margin and padding manually
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
flex-flow: row wrap; /* can also try column wrap */
align-items: center;
justify-content: center;
}
#main-container{ /* this will be the size of your browser window */
width: 100%;
height: 100vh;
}
html:
<section class="flex-container" id="main-container">
<!-- your things here -->
</section>
if you want an ul to show li elementos horizontally just add flex-container class to it, it will show horizontally, then you can add this rule ul.flex-container li to treat those kind of list better, e. g:
ul.flex-container li{
margin: 15px 0 0 15px;
}
your code could look like this:
<section class="flex-container" id="main-container">
<ul class="flex-container">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</section>
you'll have a main container with the size of fhe window with its elements centered, inside youll have a list with its elements horizontally aligned
I like to use this approach:
.pageContainer {
display: grid;
place-items: center;
min-height: 100vh;
}
You can read more about it directly from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
Create a container at least as big as the screen, and align the content to the center of the container.
The centering of elements can be handled by Flexbox. You just need to make sure that the container that holds the logo and the list of social media icons is as big as any screen the user might have. You can use viewport-percentage sizes for that, for example min-height: 100vh means “make the height of this element at least 100 percent of the viewport height”, where viewport is the size of the browser window.
Here’s a working solution:
body {
margin: 0;
}
main {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
margin-bottom: 16px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
}
li:not(:last-of-type) {
margin-right: 16px;
}
<main>
<img src="https://picsum.photos/id/237/280/120" alt="Logo" />
<ul>
<li>Icon 1</li>
<li>Icon 2</li>
<li>Icon 3</li>
<li>Icon 4</li>
<li>Icon 5</li>
<li>Icon 6</li>
<li>Icon 7</li>
</ul>
</main>
I have a Flexbox in use for header navigation, the logo is aligned to the left and the ul items are aligned to the right as in a traditional style. Both the logo and the navigation links are flex items within a full width Flexbox, and I have given them both flex: 50%. The navigation links section is also a Flexbox (an inner Flexbox) to prevent the menu from stacking and instead behaving in a better responsive manner.
When I apply justify-content to that inner Flexbox, there is no change to the links, as if there is an overriding style or the property does not work on an inner text box. I should like the navigation links to equally divide themselves among the 50% of the screen width.
I've toyed with placing flex: auto on the items but can't keep it within the current layout by doing that, and I've tried fiddling with inline elements to see if I can remove any overriding property, but no cigar.
#nav {
display: flex;
flex: 50%;
align-items: center;
}
#logo {
margin-right: auto;
width: 50px;
height: auto;
}
#links {
margin-left: auto;
display: flex;
justify-content: space-between;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
You were pretty close. Important changes I made were to set the width of the #links <ul> to 50% and add justify-content: space-between to the container #nav wrapper. A few other style changes to the ul so it doesnt have default margin and padding and I think it is behaving as you are expecting now..
#nav {
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
width: 50px;
flex: 0 0 50px;
}
#links {
width: 50%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
<ul id="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
I think you have problem with flex: 50%; CSS deceleration. It's not at proper place. I have re-write the html to use it properly and fixed the CSS according.
Here is the Modified CSS
#nav {
display: flex;
background: #eee;
}
#nav>#logo,
#nav>#links {
flex: 50%;
}
#logo img {
width: 50px;
height: auto;
}
#links {
display: flex;
justify-content: space-around;
list-style-type: none;
}
#links a {
text-decoration: none;
}
<nav id="nav">
<div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
<ul id="links">
<li><a href="#">Link1<a></li>
<li><a href="#">Link2<a></li>
<li><a href="#">Link3<a></li>
<li><a href="#">Link4<a></li>
</ul>
</nav>
Also the code available at codepen https://codepen.io/mobarak/pen/jRjZxB/
I have an element with a pre-determined width, and within that element I have 1 or more lists. Each list will have a class defining whether it is horizontal or vertical.
The horizontal list needs to span the full width of the div, but center the list items. When try to make the list items equally share the space given to them rather than just centering, I get no results - I don't have to worry about horizontal overflow, since I can just make a second horizontal list if I need to.
The same thing is true for when I try to do this with the vertical lists.
.c {
display: block;
width: 90%;
background: orange;
padding: 1% 5%;
text-align: center;
}
ol {
list-style-type: none;
padding: 0;
}
.h {
display: block;
background: blue;
}
.h li {
display: inline-block;
background: green;
}
.v {
display: inline-block;
background: red;
}
.v li {
background: violet;
}
<div class="c">
<ol class="h">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
<ol class="v">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
<ol class="v">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
</div>
And I want to end up with this:
How do I get the horizontal items to self-pad, as well as the vertical lists? I'm looking for results without the use of tables, display: table (etc), and flex, if possible. It doesn't matter if extra space is filled in with padding or margin to me.
This div container .c has 90% width.
So the properties are being inherited by the other classes it seems.
You also have the issue of the yellow background not covering the other classes.
The changes I made were creating a new class to wrap around everything to make sure it all has the yellow background and I also wrapped your .c div around the other 2 classes instead and changed the .h class to display inline-block, this means you can set the height and width of the element while keeping it inline, I set the width to 100% and aligned the text to centre.
.d {
background: orange;
}
.c {
display: block;
width: 90%;
padding: 1% 5%;
text-align: center;
}
ol {
list-style-type: none;
padding: 0;
}
.h {
text-align: center;
display: inline-block;
width: 100%;
background: blue;
}
.h li {
display: inline-block;
background: green;
}
.v {
display: inline-block;
background: red;
}
.v li {
background: violet;
}
<div class="d">
<ol class="h">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
<div class="c">
<ol class="v">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
<ol class="v">
<li>Item</li>
<li>Line</li>
<li>List</li>
</ol>
</div>
</div>
You have 4 options;
Make CSS rules for all the possible amounts of horizontal list elements
Use tables
Use JavaScript
Use flex
I can write examples for all those options, or just the option(s) you'd like.
I wanted to create a list of items by displaying a name, a list of properties and an image. Although this seems like quite a common and easy problem, I am struggling to get it right.
After having changed the markup a dozen of times, I chose to represent the list by a ul in which each li consists of a h3(name), a ul(properties) and a img(image).
In order to make it fill the page a bit more, I used CSS's flexbox in order to put the image and the properties next to each other in a responsive way.
img {
max-width: 100px;
}
#example > ul > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
This looks pretty nice when the properties for all elements are equally long, but it kind of looks messy when this is not the case (the property-lists are not properly aligned as indicated by the red lines in the above snippet). I know I could get all the content in a table, causing every table element to be aligned nicely under each other, but then I don't know how I can have my names in a different line than the properties and the image...
My question could thus be formulated as:
How can I align the properties nicely under each other in such a way that they are displayed next to the image (to fill the space on the screen)? Additionally I would like that the image is displayed under the properties when the screen becomes too small (i.e. responsive design) and a separate line for the name.
Any help will be greatly appreciated
Update:
As it turned out that my question is not that clear, I tried to make it more clear by adding the vertical red lines in the snippet. I manage to get the desired result when using a table, but then I have to omit the names (as shown in the attached image) and the responsiveness...
You can just create a simple item element, something like this:
HTML
<li class="item">
<h2>Charmander</h2>
<div class="content">
<h3>Properties</h3>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<div class="image">
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</div>
</li>
I simply divided the element in three main sections: title, properties and the image.
As you can see the properties are still inside a <ul> because they are used like a enumeration.
CSS
#example > ul {
padding: 0;
}
.item {
width: 100%;
background: #CCC;
padding: 20px;
box-sizing: border-box;
/* Padding will be inside the element (will not affect the width/height) */
margin: 20px 0;
overflow: hidden;
/* Used to keep the floated element inside the flow */
}
.item h2 {
text-align: center;
}
.item .content {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
.item .image {
width: 200px;
float: left;
}
.item img {
width: 100%;
}
.item .content ul {
border-left: 2px solid red;
margin-bottom: 20px;
}
With the first selector (#example > ul) I reset the default padding it has.
The text of the properties will just start on a new-line if it is too long (you can test this by resizing the window).
You can just edit the padding-left of the .content element, to move the properties a little bit more to the right or to the left.
Example JsFiddle
This is just to give you an example of how you want to approach this.
Hope it was helpful!
I have just been so stupid. As an alternative to the helpful answer of nkmol, it could also be as simple as changing the justify-content property to space-between and correct it by setting width and auto-margins.
img {
max-width: 100px;
}
#example > ul > li {
width: 80%;
margin: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
li > div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
PS: I'm sorry for my awful question...
You need to break out your items from the primary UL
You can think of it as though you were building a table, but instead, use divs and then use a UL just to list the properties. This way, you can style each of the individual elements as needed.
look here: https://jsfiddle.net/oq04f6pm/2/
<section id="example">
<div class="section-title">Bulbasaur</div>
<div class="section-list">
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<div class="section-image">
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</div>
</section>
img {
max-width: 100px;
}
.section-title {
width: 100%;
text-align: center;
font-weight: bold;
}
.section-list, .section-image {
width: 50%;
float: left;
}
.section-image {
text-align: center;
}
#media screen and (max-width: 400px) {
.section-list, .section-image {
width: 100%;
}
.section-image {
text-align: left;
}
}
I'm currently trying to build a mobile nav with Flexbox :
A vertical menu that take 100% of the available height. The nav items are evenly placed and takes the whole height.
I use a ul>li>a structure.
The issue :
I can't find a way to:
force <a> to take 100% of the parent li height
make the content of a vertically align.
I did success to do one or the other, but seems I can't have both :(
Here a jsFiddle of what I got so far :
http://jsfiddle.net/hopxzcq3/
<nav>
<ul class="main-nav">
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
<li>Cat 4</li>
<li>Cat 5</li>
</ul>
</nav>
.main-nav {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.main-nav li {
display:flex;
flex-grow: 1;
}
.main-nav li a {
display:block;
width:100%; height:100%;
}
Use flex:1 on the anchor instead of display:block; width:100%; height:100%;
.main-nav li a
{
flex:1; /* make the anchor full size*/
display:flex; /*these 2 are needed for vertical alignment*/
align-items: center;
}
Updated fiddle