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>
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>
My gallery on mobile phones looks way worse in vertical position than in horizontal.
.order-gallery ul li {
display: inline;
}
.order-gallery ul {
display: flex;
justify-content: flex-start;
align-items: center;
list-style-type: none;
text-align: center;
padding: 0;
}
.order-gallery li {
flex: 1 33%;
padding: 0 20px;
}
.order-gallery li img {
max-width: 100%;
}
.panel-body {
background: rgba(21, 21, 21, 0.5);
padding: 15px;
<div class="panel-body order-gallery">
<ul>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
<li>
<img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
</li>
</ul>
</div>
Horizontal view: https://imgur.com/a/1XrZ07K
Vertical view: https://imgur.com/a/YRD7siT
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>
I would like to place an image to the left of the text and keep it like that depending on the resolution of the window.
Here's what it looks like without an image: http://prntscr.com/fmky4f
This is what I would like it to look like after placing it. https://prnt.sc/fmkk0a
This is my code:
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
Now I tried just simply putting in the image with the .logo class properties, but they don't seem to do the job as intended.
If you're going to use floats and widths for the logo, use that for the menu also.
.xd {
float: left;
width: 90%;
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<img class="logo" src="http://placehold.it/50x50">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
You could also use flexbox. Perhaps something like this:
header,
ul {
display: flex;
}
header img {
display: block;
max-width: 100%;
height: auto;
}
header ul {
flex-grow: 1;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
header a {
padding: 5px;
color: #080808;
}
<header>
<div>
<img src="http://placehold.it/50x50">
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</header>
You can use position: absolute; and the default settings on the image as shown below. (You can use top and left settings to move it away from the border/corner if you want)
This keeps the menu items centered in relation to the container.
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
#image1 {
position: absolute;
}
<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</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>