I would like to make below image. However, I could not combine both display:inline and display: block together. If I use display: block, everything goes on the same line. On the other hand, if I use display block, every element goes to new line.
Here is my code
HTML
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
CSS
ul{
list-style: none;
li{
display: inline;
h4{
display:inline;
}
}
img{
width: 6rem;
}
}
Please see an image here of what I would like it to be.Image
use this way display:inline-block and display:block
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li h4 {
display: block;
text-align: center;
}
ul img {
width: 6rem;
}
img {
width: 70px;
}
<ul>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="select">
<h4>3. Select</h4>
</li>
</ul>
If you remove all the features that HTML list gives, you probably don't need a list. I suggest using divs instead. Set your container with
display: flex;
justify-content: space-between;
to get the layout you want.
.container {
display: flex;
justify-content: space-between;
}
.icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
h4 {
font-size: 50px;
font-weight: bold;
}
img {
width: 6rem;
}
<div class="container">
<div class="icon">
<img src="https://via.placeholder.com/200" alt="post" />
<h4>1. Post</h4>
</div>
<div class="icon">
<img src="https://via.placeholder.com/200" alt="wait" />
<h4>2. Wait</h4>
</div>
<div class="icon">
<img src="https://via.placeholder.com/200" alt="select" />
<h4>3. Select</h4>
</div>
</div>
Please try this:
HTML:
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
SCSS:
ul{
padding-left: 0;
list-style: none;
li{
float: left;
display: inline-block;
width: 33.33%;
text-align: center;
h4{
display:inline-block;
width: 100%;
}
}
img{
width: 6rem;
}
}
pls try this code
<html>
<head>
<style>
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li{
display: flex;
flex-direction: column;
}
ul li h4 {
display: inline;
}
ul li img {
width: 6rem;
}
</style>
</head>
<body>
<ul>
<li class="icon">
<img src="images/how/post.png" alt="post">
<h4>1. Post</h4>
</li>
<li class="icon">
<img src="images/how/wait.png" alt="wait">
<h4>2. Wait</h4>
</li>
<li class="icon">
<img src="images/how/select.png" alt="select">
<h4>3. Select</h4>
</li>
</ul>
</body>
</html>
Related
i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I cant see my alignment in one line. logo, menu and right menu... Please help to achieve the final output.
body {
background-color: #ffffff;
}
#wrapper {
width: 1200px;
margin-left: auto;
margin-right: auto;
/* background-color: #CDCDCD; */
}
.top-menu {
margin-top: 40px;
/* background-color: #95E659; */
}
header {
/* width: 100%; */
}
.logo {
width: 40px;
height: 40px;
}
.menu {
float: left;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
margin-right: 55px;
text-decoration: none;
color: #303030;
font: 14px lato;
}
.menu ul li:first-child {}
.menu ul li:nth-child(6) {
margin-right: 300px;
}
.search-container {
float: right;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href=""><img src="assets/images/logo.jpg" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
<li>
<img src="assets/images/user.png" alt=""> Login
</li>
<li>
<img src="assets/images/bucket.png" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
</header>
<hr>
</div>
Use flex box for inline block elements. This will also give you a lot more control over the children elements and their layout.
I altered your HTML a little, adding the center menu buttons in a parent div and separating unordered list into two unordered lists. This way we can use flex to justify their content with space-between placing them on separate ends of the parent elements block.
On the menu display: flex, we also add a flex value for each child element, the logo, the menu buttons parent div between and the login button. By placing these elements into their own parent divs, we can control the width using flex. To center the elements vertically, if our default axis for display flex is set to row, we can use the align-items property. This will align the items in that parent elements border vertically. align-items: center
The logo and login buttons parents both having a flex value of 0, which means they will take up only the space they need to show their content. The middle element, .between having a flex of 1 will mean it will take up the rest of the parent menus width. This will allow us to place a flex display on the UL elements and we can then set them on separate sides of the remaining sections width using justify-content on the UL elements parent element .between.
Snippit best if viewed in full page view as you define the width of your wrapper to 1200px.
body {
background-color: #ffffff;
margin: 0 auto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background-color: #CDCDCD;
}
.top-menu {
margin-top: 40px;
background-color: #95E659;
}
.logo {
flex: 0;
}
.logo img {
width: 40px;
height: 40px;
}
.search-container {
flex: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 2rem;
}
.between {
display: flex;
justify-content: space-between;
flex: 1;
}
.menu div ul.left {
display: flex;
justify-content: flex-start;
}
.menu div ul.right {
display: flex;
justify-content: flex-end;
}
.menu ul li {
flex: auto;
display: inline;
list-style: none;
padding: 0 1rem;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<header>
<div id="wrapper">
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href="">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="">
</a>
</div>
<div class="between">
<ul class="left">
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
<ul class="right">
<li>
<img src="assets/images/user.png" alt="">Login
</li>
<li>
<img src="assets/images/bucket.png" alt="">Basket
</li>
</ul>
</div>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">search</i></button>
</form>
</div>
</div>
</div>
</div>
</header>
Here's a start with flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
background-color: #ffffff;
}
#wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.top-menu {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu {
display: flex;
align-items: center;
}
.logo {
width: 40px;
height: 40px;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<img src="https://via.placeholder.com/10" alt=""> Login
</li>
<li>
<img src="https://via.placeholder.com/10" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">s</i></button>
</form>
</div>
</div>
</div>
</header>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I'm a beginner. I tried to build a navbar with flex but failed to get the desired result.
what I want is
Logo Home About Services Contact
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.nav {
display: flex;
background-color: gray;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="nav">
<img src="./Logo.png" width="80px" class="logo" alt="">
<nav>
<ul>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.header {
display: flex;
background-color: gray;
width: 100%;
}
nav {
width: 100%;
}
ul {
display: flex;
justify-content: space-between;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="header">
<nav>
<ul>
<img src="./Logo.png" width="80px" class="logo" alt="">
<div>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</div>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
I believe this is what you are looking for
You can use display flex and justify-content property to move items.
.nav
{
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center
}
.img-wrapper
{
width:33.33%;
}
.nav-items-center
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.nav-item-right
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
<header class="nav">
<div class="img-wrapper">
<img src="./Logo.png" width="80px" class="logo" alt="Logo">
</div>
<ul class="nav-items-center">
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</ul>
<ul class="nav-item-right">
<li id="contact" class="menu con">Contact </li>
</ul>
</header>
I'm trying to center these images in the UL. I've looked at some of the other topics on this, but couldn't apply the solutions to my situation. If anyone can help me, I'd appreciate it. Thank you.
JSFiddle: https://jsfiddle.net/dvbL2d5y/1/
HTML
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
Please apply below css. i have removed the float property and introduce display:inline-block.
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
padding:0;
}
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
I have modified your code. I hope it helps. You just need to add inline-block to an element if you want to center it with the help of text-align: center tag.
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display:inline-block;
margin:0;
padding:0;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is this what you were looking for?
#equipment-gallery li {
float: left;
list-style: none;
margin: 0 auto;
display: block;
width: 100%;
}
Remove "float:left" from this class"#equipment-gallery li" and add "display:inline-block"
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
display: inline-block;
padding: 0;
text-align: center;
}
#equipment-gallery li {
float: none;
list-style: none;
margin: 20px;
display: inline-block;
}
You can see link fiddler add this css https://jsfiddle.net/zdso82b7/1/
To align center I had used flexbox concept in ul tag
ul.medium-grid {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap row;
}
for more details regarding flex box, please find on CSS-Tricks A Complete Guide to Flexbox
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display: flex;
justify-content: center;
flex-flow: wrap row;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>