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
Related
i have this codes & styles in my project:
i want to aling the texts and span style
my default code image like this:
body {
direction: rtl
}
div {
position: absolute;
top: 30px;
right: -100px;
height: 300px;
overflow-y: scroll;
background-color: #fff;
box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
border-radius: 15px;
}
li {
display: flex;
align-items: baseline;
justify-content: space-between;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>
I want make my list like this image:
HOW can I align it like image above?
(my body direction is rtl)
change li { justify-content: space-between; } to li { justify-content: flex-end; }
body {
direction: rtl
}
li {
display: flex;
align-items: baseline;
justify-content: flex-end;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>
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:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
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 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>