Basically I want to have a small row with 4 social icons in middle of screen. I wanted to have it middle of screen wheather I am opening my page in mobile, laptop or tab.
I have applied width:50% but issue is ul li's images are in left side. What I can do is to use media queries for all screen resolution but that will be not good as then for every screen/resolution point I have to make queries which is not good practise.
I think I am missing something easier about this point but I am not getting that.
You can see my code here
In short : I want to have my all 4 icons in middle of row in every screen(big, small) with fix gap between them.
HTML
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<div class="clearfix"></div>
</ul>
CSS
.clearfix{clear:both;}
ul li{list-style-type:none;float:left;padding-left:7%;}
ul li:first-child{padding-left:0px !important;}
ul li:last-child{padding-left:0px !important;}
ul{padding-left:0px;width:50%;margin-left:auto;margin-right:auto;}
You can simply use flex for doing that.
Review the answer below :
.clearfix{
clear: both;
}
ul li{
list-style-type: none;
float: left;
padding-left: 20px;
}
ul li:first-child{
padding-left: 0px !important;
}
ul li:last-child{
padding-left: 0px !important;
}
ul{
padding-left: 0px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.footerUl {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<div class="clearfix"></div>
</ul>
I'm not sure if you like this way. But instant I have this idea.
ul.footerUl{
text-align:center;
}
ul li{list-style-type:none;display:inline-block;}
ul li img{ margin:5px 20px;}
<ul class="footerUl">
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
<li>
<img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32">
</li>
</ul>
Related
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 stacked on the following problem. I have got an unordered list with the social icons and kind of a little dot appears on the right down corner of the icons when I change the display to inline.
HTML
<div class="iconos">
<ul class="contacto">
<li>
<a href="mailto:xxxxxx.com" class="socialicon">
<img src="images/mail.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxxx" class="socialicon">
<img src="images/facebook.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxx" class="socialicon">
<img src="images/twitter.png" width="50" height="50">
</a>
</li>
</ul>
CSS
ul.contacto {
list-style: none;
padding: 0;
margin: 0;
}
.contacto li {
padding: 20px;
display: inline;
}
That dot is an underline from <a> element. You can hide with this:
.contacto li a {
text-decoration: none;
}
I'm creating a web page that shows pictures of cute dogs. For every dog, I want to show the name of the dog and then a picture below it.
I would like the images to be shown side by side, but they are shown stacked vertically.
Here is my fiddle
http://jsfiddle.net/53bnhscm/2/
Here is my HTML
<h1>Listing dogs</h1>
<ul>
<li> Dog 1 </li></br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li> Dog 2 </li></br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Here is my CSS
li {
list-style: none;
display: inline;
}
I thought a break statement after every list item and a display:inline property would do the trick, but I guess not.
Another solution is to use display: table-cell to ul elements:
ul {
display: table-cell;
}
li {
list-style-type: none;
}
<h1>Listing dogs</h1>
<ul>
<li>Dog 1</li>
</br>
<li>
<a href="/dogs/2">
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
</ul>
<ul>
<li>Dog 2</li>
</br>
<li>
<a href="/dogs/3">
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
Your lis are contained within their own ul so you need to inline that instead.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
FIDDLE
Also li tags are more for list items so this isn't a real efficient way of doing this. Plus its a lot of extra code. You could simply wrap your sections in a container and inline that:
HTML
<h1>Listing dogs</h1>
<div class="wrapper">
Dog 1
<a href="/dogs/2">
<img alt="Dog 1" src="..." />
</a>
</div>
<div class="wrapper">
Dog 2
<a href="/dogs/3">
<img alt="Dog 2" src="..." />
</a>
</div>
CSS
.wrapper{
display: inline-block;
}
.wrapper a{
display: block;
}
EXAMPLE
Here a fiddle. Your markup is messy by the way, I recommend to use HTML5 markup <figure> so you can easily add a <figcaption>: http://jsfiddle.net/53bnhscm/7/
<h1>Listing dogs</h1>
<figure>
<figcaption>Dog 1</figcaption>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</figure>
<figure>
<figcaption>Dog2</figcaption>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</figure>
CSS
figure {
float:left;
display:inline-block;
}
ul > li {
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}
And I think may be you are looking something like this. In that case you have to edit your html code
http://jsfiddle.net/ahmadsharif/p0cbmy2h/
The following answer is correct for your markup.
ul {
list-style: none;
display: inline-block; //use instead of inline
}
But if you mean exactly what is written in your question then one thing that I need to mention and it is “You should take care of your HTML markup.”
<ul>
<li>
<a href="/dogs/2">
<b>Dog 1</b>
<img alt="Dog 1" src="http://renterswarehouse.com/wp-content/uploads/2013/12/Cute-Dog-dogs-13286656-1024-768-200x200.jpg" />
</a>
</li>
<li>
<a href="/dogs/3">
<b>Dog 2</b>
<img alt="Dog 2" src="https://v.cdn.vine.co/r/avatars/1D8A5A9AD81112510785588019200_21ff866832a.1.0.jpg?versionId=0I_eiPNigLBtjlgOMJIQyCYY4fKf2YNs" />
</a>
</li>
</ul>
and then your CSS will be:
ul li{
display: inline-block;
}
ul li a b{
display: block;
text-align: center;
margin-bottom: 5px
}
Just use UIKIT and its grid system. This way they will stack automatically on phones.
http://getuikit.com/docs/grid.html
<div class="uk-grid">
<div class="uk-width-1-2">Your Image HERE</div>
<div class="uk-width-1-2">Another Image Here</div>
</div>
I am sure this has been asked before so I apologize but I cant find an answer that works for me - or perhaps I just don't understand.
I am new in HTML & CSS and I am trying to build a navigation bar of images that stretches to 100% of the width of the screen. It would be great if someone could show me what I am missing. The links are going to be changed later.
<body>
<ul>
<li><a href="index.html">
<img src="images/logo.png" height="80" width="150">
</a>
</li>
<div id="menu">
<li>
<a href="index.html">
<img src="images/homeButton.png" height="80" width="150"></a>
</li>
<li>
<a href="index.html">
<img src="images/scratchButton.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/c++Button.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/PythonButton.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/signInButton.png" height="80" width="150">
</a>
</li>
</div>
</ul>
.
html, body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0
}
li {
float: left;
}
a {
}
#menu {
width: 100%;
list-style-type: none;
background-color: #000000;
}
#menu :hover{
background-color: yellow;
}
You could use a table and specify the columns as equal widths and place it in a div which occupies 100% of the width.
E.g.:
<div id="container">
<table>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%"> // maybe you can make all five statements at once
<tr>
<td>1st/td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
<td>5th</td>
</tr>
</table>
</div>
And
I've got a ul list which contains a 9 pictures, which are either 70px in height or 70px in width, depending on whether the image was taken portrait or landscape. Ive got the images to to display with 3 rows and 3 columns quite easily, but I cant seem to align the images so they are in the center horizontally as well as vertically.
Thanks all.
This is my code below
css
#gallery_image ul {
list-style:none;margin:0;
padding:0;
}
#gallery_image li {
display: block;
height: 80px;
Width:80px;
line-height: 80px;
float:left;
padding:5px;
text-align:center;
}
#gallery_image li img {
line-height:80px;
vertical-align: middle;
}
html
<div id="gallery_image">
<ul>
<li>
<img src="/flower1.jpg" alt="" />
</li>
<li>
<img src="/flower2.jpg" alt="" />
</li>
<li>
<img src="/flower3.jpg" alt="" />
</li>
<li>
<img src="/flower4.jpg" alt="" />
</li>
<li>
<img src="/flower5.jpg" alt="" />
</li>
<li>
<img src="/flower6.jpg" alt="" />
</li>
<li>
<img src="/flower7.jpg" alt="" />
</li>
<li>
<img src="/flower8.jpg" alt="" />
</li>
<li>
<img src="/flower9.jpg" alt="" />
</li>
</ul>
</div>