I am trying to have the 3 unordered list items take up the whole block spaced out evenly, with the 1st one at the start the 2nd one in the middle and the last one touching the end of the block.
I am trying to do it with flex box but currently I am having difficulty, I figured justify-content: would work for this task, but its not doing anything.
Here is the end result I am trying to achieve:
link to codepen
Example:
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
you could use flex-basis:33.33% on the lis so they stay 3 on one line and text-align:center
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
text-align:center;
}
ul li {
flex-basis: 33.33%;
}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
let me know if this helps
You can use text-align: center on the li..
li
flex: 1 1 100px
text-align: center
http://codepen.io/anon/pen/bqJKwK
Related
I'm creating a very simple responsive image gallery, with the least amount of css posible.
I've came up with the following
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>name goes here</p>
<p>subname goes here</p>
<p>year</p>
<img src="" width="20" height="15" alt="">
</div>
</li>
...
</ul>
</div>
CSS:
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block; /* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
}
.thumb-caption > * {
margin-top: 10px;
}
... and the result
https://jsfiddle.net/51yrdk11/
I want to center everything inside the class thumb-caption. It could be a <p> or img tag.
For some reason, when one of the <p> in the thumb-caption class is very long, it does not center correctly.
Can anybody tell me why and to fix it?
EDIT
I know that by using text-align:center an the <p> tags, it aligns correctly. But, why? Why some are align and the long ones are not align? I need to understand the logic.
The align-items is used to align the flex-items. It will not align the inner content of the flex-items.
You have to use text-align: center in the .thumb-caption class
Stack Snippet
/*----- reset -----*/
* {
box-sizing: border-box;
}
p,
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
/* end - reset */
.container {
max-width: 800px;
margin: auto;
background-color: pink;
}
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block;
/* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.thumb-caption>* {
margin-top: 10px;
}
/* media queries */
.thumbnail li {
flex-basis: calc((100% / 3) - 20px);
}
/* end- media queries */
.fluid {
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname is very very long, and when it is very long, for some reason, it does not center correctly, why?
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
</ul>
</div>
Updated Fiddle
The reason the smaller text is centered and the long is not, is because it is the p element that gets centered, not its content.
What the align-items: center does is making the p shrink to its content, in opposite to its default, stretch, which makes it fill its parent's width, hence when content is too wide it can't center the p anymore, as it takes full width.
As you already know, text-align: center targeting the p element will fix this.
As a note, one of the simplest things one can do, to understand these kind of logics, is to add a border or background color on the element that seems to behave odd, in this case on the p, and one will most of the time see what's going on.
/*----- reset -----*/
* {
box-sizing: border-box;
}
p,
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
/* end - reset */
.container {
max-width: 800px;
margin: auto;
background-color: pink;
}
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block; /* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
}
/* for this demo */
.thumb-caption p {
border: 1px dashed black;
}
.thumb-caption > * {
margin-top: 10px;
}
/* media queries */
.thumbnail li {
flex-basis: calc((100% / 3) - 20px);
}
/* end- media queries */
.fluid {
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname is very very long, and when it is very long, for some reason, it does not center correctly, why?
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
</ul>
</div>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<li class="description_os">
<ul>OS</ul>
</li>
<li class="descrption_ram">
<ul>RAM</ul>
</li>
<li class="descrption_storage">
<ul>STORAGE</ul>
</li>
</div>
</div>
I want to add price,OS,RAM right beside phone image.
Here is my image:demo-one
I have tried:
float:right;
margin:
with float property im able to move it to right side but with margin im not able to move it up and left.
Even if i manage to move it to right beside image,it breaks on smaller sized devices.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left:25px;
}
ul{
margin:0;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="description_ram">
Ram
</li>
<li class="description_storage">
Storage
</li>
</ul>
</div>
</div>
You have put ul in li , which is wrong.
ul is a parent of li , so li must be in ul.
Is this the same that you want?
Hope this helps.
To keep the image and text on 1 line, here is 2 good solutions that does, even on smaller devices.
Note, since an ul need a li, I removed your inner ul's
First, the most classical one, using BFC float on the image and a margin-left on the text.
This avoid issues like white spaces with inline block and width calculation when using float, or inline-block, on both elements.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float: left;
}
.description_box_1 {
margin-left: 176px; /* 160px width + 14px padding + 1px + 1px border */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
Second, a more modern solution, using Flexbox
.article {
display: flex;
}
.item_one_image {
border: 1px solid #ccc;
padding: 4px 0px 10px 14px;
}
.description_box_1 {
flex: 1; /* take all the remaining space */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
List item element of html tags should be covered by your unordered list element, that means, "ul" tag should have children elements as "li"
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
</ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</div>
</div>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left: 10px;
}
https://fiddle.jshell.net/hofh146n/
Just add .item_one_image, .description_box_1 { float: left; } code in to your CSS. And change the ul,li structure. Refer code from following HTML section.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
.item_one_image, .description_box_1 {
float: left;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" alt="demo image" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os"> OS </li>
<li class="descrption_ram"> RAM </li>
<li class="descrption_storage"> STORAGE </li>
</ul>
</div>
</div>
I am new to html coding and I could not find exact and clear solution for my problem.
I want to create a page with this format: I want to do the page with list of html.
Here is my html code:
Although I made alignment center my picture is on the left side of the page. What is wrong or missing with my code?
There is no float: center. Only float: left and float: right. You can left-float all of <p> inside the <li> and set the width of them to 33.33%.
In this case the image has to be responsive:
img {
height: auto;
max-width: 100%;
}
Every <li> represent a row
<ul>
<li>
<p>text</p>
<p><img src=""></p>
<p>text</p>
</li>
</ul>
In total
img {
width: 100%;
height: auto;
}
ul {
list-style-type: none;
}
ul>li>* {
box-sizing: border-box;
display: block;
float: left;
word-break: break-all;
padding: 0 5px;
width: 33.333%;
}
.text-center {
text-align: center;
}
.full-width {
width: 100%;
}
<ul>
<li>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<p class="full-width">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
<li>
<li>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p class="text-center">
<img src="http://placehold.it/300x200" alt="">
</p>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</li>
</ul>
You would probably be best looking into using a grid system. I would recommend using Twitter's Bootstrap - definitely the best as easiest to start using
http://getbootstrap.com/
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
I have a list like this:
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
with this CSS:
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
which produces output that looks like this (jsfiddle):
I need to style the background where the list bullets are, such that it would look something like this:
I've tried setting a border on the UL, but this extends to the bottom of the whole list (including the "multi-line content" divs), which is not the desired look. The background should not extend below the bottom of the last "Label" line. I am looking for suggestions for CSS tricks to make this work, or alternative CSS/HTML structures that would produce the same output. The solution should work for any number of <li> elements, and ideally be pure CSS/HTML.
Any ideas?
Here's an approach that doesn't require changes to your markup or height statements.
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
li {
border-left: 12px solid;
}
li:last-child {
border: none;
margin-left: 12px;
}
li > span {
border-left: 12px solid;
padding-left: 8px;
margin-left: -12px;
}
ul {
list-style-type: none;
}
<ul>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
</ul>
Here you go:
.list-item {
border-left: 10px solid black;
list-style: none;
padding-left: 10px;
}
ul li:last-child{
height: 15px;
}
jsfiddle
The following will give you the look you're after. You'll need to check it works in key browsers your users will have.
<html>
<head>
<style>
ul {
list-style-type: none;
padding-left: 5px;
margin: 0px;
background-color: black;
}
.list-item {
vertical-align: top;
background-color: white;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
</body>
</html>
You can add another div in your li and work with it like this:
HTML
<ul>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<li class="list-item">
<div class="b">
<span>Label</span></div>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
CSS:
.list-item > * {
vertical-align: top;
}
.list-item{ list-style-type: none;}
.a{border-left:5px solid red;padding-left:7px;}
.b{border-left:5px solid red;padding-left:7px;display: inline;}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
I don't know if this is what you're looking for, maybe you just want a fancier solution, but this works.I also have added some paragraphs after the list to check if this break the layout.
Have a look on this FIDDLE