I have a ul whose cells consist of an image and a text:
<ul class="special_ul">
<li>
<img src="img/solution_icon_optimize-efficnt.png">
OTT
</li>
<li>
<img src="img/solution_icon_personal.png">
Cloud Computing
</li>
<li>
<img src="img/solution_icon_diti-cx.png">
Managed Services
</li>
<li>
<img src="img/solution_icon_biz-analitics.png">
Social Media
</li>
</ul>
css:
.special_ul li{
padding-right: 10px;
list-style-type: none;
display: inline-block;
text-align: center;
}
.special_ul li img , .special_ul li a{
display:block;
}
The problem is that the text is centered but the images are not:
(i highlighted the list with the mouse so you can see the images are not in the center)
How do I make the images centered (horizontally) as well?
You can just remove img {display: block;}, by default it is inline level, they will get centered with text-align: center; set on the container, which you already did.
Or, add margin: 0 auto; if you need to keep display: block; on the img:
.special_ul li img {
display: block;
margin: 0 auto;
}
Related
I need to display images in my grid with the following idea: every li elements of each ultag should stay in the same row and be 100% width of the container.
As you can see in the jsfiddle, for the demo, I created 3 ul. So I would like 3 rows of images.
The jsfiddle: is here
The final result should be like below:
I don't know how to proceed so that every row takes 100% width.
So every row (ul) may contains 1, 2, 3, 4 or 5 images.
every li elements of each ultag should stay in the same row and be 100% width of the container
You needs to use Flexbox
Result
ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 3px;
}
li {
flex-grow: 1;
}
li+li {
margin-left: 3px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<ul>
<li>
<img src="https://via.placeholder.com/250x200?text=A1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=A2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=A3">
</li>
</ul>
<ul>
<li>
<img src="https://via.placeholder.com/200x200?text=B1">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=B2">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=B3">
</li>
</ul>
<ul class="fivePerRow">
<li>
<img src="https://via.placeholder.com/250x200?text=C1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=C2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=C3">
</li>
<li>
<img src="https://via.placeholder.com/200x200?text=C4">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=C5">
</li>
</ul>
And same code on JSFiddle
I think using Flexbox will do the job.
ul {
width: 100%;
list-style: none;
display: flex;
justify-content: space-between;
}
li {
display: inline-block;
vertical-align: top;
}
Codepen Demo
I'm trying to add a site banner above the menu on my site using a simple img tag but whenever I do so the menu just overlaps the image. What I want to achieve is the menu to be pushed down by the image above it so it appears right under it.
HTML:
<header>
<img src="site_logo.jpg" alt="">
<img src="banner_small.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My first img is for the site logo and the second one is in the menu. I want to position the first img to be on top of the site and push the menu down
CSS:
header {
height: 50px;
background: #333333;
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
Try to put the images inside div elements:
<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>
Then if you want to increse ou decrease the space between elements use the Margin property:
x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}
I want to make a nav bar using images but still have text under each image, yet I also want the text to be centered.
I have the following HTML
<div class="whatwedo-wrapper" id="whatwedo">
<div class="whatwedo">
<ul>
<li>
<img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
<br>
Brand Online
</li>
<li>
<img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
<br>
Brand Management
</li>
</ul>
</div>
</div>
and I have made what I have a jsfiddle here - http://jsfiddle.net/B7sdp/
The overall outcome I am looking for is for the images to be centered and the text to be underneath its image, also centred.
Thanks in advance!
You should add text-align:center property to your li and replace float:left with display:inline-block
.whatwedo li {
width: 200px;
display:inline-block;
list-style: none;
text-align:center;
}
See example here : http://jsfiddle.net/B7sdp/1/
You need to add text-align: center; to .whatwedo li
.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
text-align: center;
list-style: none;
}
JSFiddle
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I'm trying to create a header/nav bar where there will be navigation options on either side of a logo, which I would like all to be vertically centered. To achieve this, I'm using <li> and <li class> elements, but am having little luck with the vertical centering. Any ideas?
HTML
<header>
<nav>
<ul>
<li class="btn"><span>01</span>Home</li>
<li class="btn"><span>02</span>Vendors</li>
<li><img src="img/logo.png" alt="sews logo" /></li>
<li class="btn"><span>03</span>Tickets</li>
<li class="btn"><span>04</span>Blog</li>
</ul>
</nav>
</header>
CSS
nav {
margin: 40px auto;
width: 600px;
padding-bottom: 80px;
}
nav ul li {
display: inline;
}
nav ul li a {
margin:0 10px;
}
nav ul li.btn a {
padding-top: -10px;
}
nav ul li a span {
color: #e3c22a;
font-family: fanwood;
}
To vertically center something, apply the css rules display: table cell in addition to vertical-align: middle on the container element.
If the links and image were in the same element, say a div, you could set the image to use the style tag: vertical-align: middle;
position relative the header. position absolute the image. left: 50%; the image