I dont know if this is the right place to ask this question but I am really stuck on this part. Basically, I am trying to align my github stats side by side in the readme file.
I added this code in my readme file:
How can I make it so that the two cards align side by side? Something like this:
Any suggestions?
UPDATE:
I tried adding this but it still did not work:
<img align="center" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
<div style="display: flex; flex-direction: row;">
<img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
Please see the CSS I added and changes to your HTML. Simply doing <img align="center" is not enough.
<div style="display: flex; flex-direction: row;">
<img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
Inspected front-end and changed div styles to those suggested and it worked as expected. img
The difference in both box sizes annoyed also me. I tried the other proposal here but for some reason it didn't work for me(both in the same size on the same row). So, I did the following that has made them look much better, although they are not on the same line
### GitHub Stats
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api?username=Tsvetoslav88&theme=radical&show_icons=true&include_all_commits=true&hide_border=true" /></div>
### GitHub Languages
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Tsvetoslav88&theme=radical&langs_count=8&layout=compact&hide_border=true" /></div>
This is the solution that worked for me. Both images are about the same size and on the same line.
<div class='container'>
<img style="height: auto; width: 55%;" class="img" src="https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=blue-green" />
<img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=blue-green&langs_count=8&layout=compact" /></div>
</div>
img
Try this below:
Using the dir="auto" (which is used for text alignment) along with max-width 100% you should be able to center whatever you want.
<div align="center" dir="auto" <img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
<img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>
Related
I have been trying to achieve getting 3 images side by side. I finally got it the exact way I want them laid out. A few ways I tried, one image would always move down on smaller screens. They way I have it now is the exact way I want but the code i used is a bit messed up(not even sure if correct but it works).
My code has 4 images and just 3 show up. Again it shows up the way I want. The image that doesn't show up is the 2 one in the code. I dont want the image to show up anyways but I know it shouldnt be in there either.
I struggle with this stuff so any help on how this should read correctly is appreciated.
When I remove the 2 image in the code they all go out of line.
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>
</div>
<div id="content" width="100%">
<div>
<img src="1.jpg" width="30%" style="float:left"/>
<img src="2.jpg" width="30%" style="float:left"/>
<img src="3.jpg" width="30%" style="float:left"/>
</div>
</div>
Here is the simplest and clean code...
fiddle :http://jsfiddle.net/ag3Et/1/
css
#content{
width:100%;
float:left;
}
#content img{
width:32%;
margin-left:1%;
float:left;
}
html
<div id="content">
<img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/>
<img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
<img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>
This is the answer for your ques.. please mark it as an answer after using this code so that others can also use it in future...
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="1.jpg" width="30%" style="float:left;"/>
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>
</div>
</center>
</div>
<br><br><br><br><br><br><br><br><br></div>
</div>
You should definitely brush up on your html and css.
You need to set fixed pixel values so your images can fit into place and stay as you would like them to.
CSS:
#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap
HTML:
<div id="content">
<img src="images/image1.png"/>
<img src="images/image2.png"/>
<img src="images/image3.png"/>
<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>
</div>
I have this code:
<div id="mainDiv" style="text-align:center>
<img src="redFarm.jpg" style="width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="width: 250px">
</div>
The board image is exactly at the center of the screen. Now, the other one are aligned to the as more to center as possible, and I want them to be as more to the borders (left and right) as possible. I have tried many combinations but no luck with any of them.
Can you guys give me a pointer?
Thanks
Try floating the images left and right:
<div id="mainDiv" style="text-align:center">
<img src="redFarm.jpg" style="float:left; width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="float: right; width: 250px">
</div>
This puts the images at the top of the container; if this is a problem you can try specifying the height explicitly.
I am trying to create a vertical stack of image thumbnails. One thumbnail per line.
I am trying to upgrade my CSS skills. I have this working with a table using
<table>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
</table>
I'd like to not use a table and accomplish this using divs and CSS. This was I have better control over the spacing and layout in the future.
Any thoughts?
Very simple:
<div><img /></div>
<div><img /></div>
<div><img /></div>
A div is a block level element. Unless you specified other wise it acts similarly to a <tr> tag
Use a simple div and put some id's for every img. In CSS for the same you can modify the properties of the different id.
I would recommend you start by learning about DIVs and their properties. W3 Schools is a good start.
To get started with yours simply do:
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
DIVs by default are treated as block elements meaning they start on a new line automatically. So if you want them to appear inline then you will need to specify that by either using display: inline-block; or float:left;
Use divs/sections, define how many columns you want, lets say 4 columns...
http://jsfiddle.net/tBDjV/
<div class="col-1">
<img />
<img />
<img />
</div>
<div class="col-2">
<img />
<img />
<img />
</div>
<div class="col-3">
<img />
<img />
<img />
</div>
<div class="col-4 last">
<img />
<img />
<img />
</div>
.col-1, .col-2, .col-3, .col-4 {
float: left;
width: 22%;
margin-right: 4%;
box-sizing: border-box;
}
.last {
margin-right: 0;
}
This is completely stumping me. I'm pretty new to CSS & DIVs so please bear with me.
I'm trying to make a DIV-based image gallery.
The layout is as follows...
<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>
The images are all in thumbnail form but the thumbnails vary in size (but all less than 150x150px) which seems to rule out all of the vertical-align solutions I've found, especially when combined with the fact that the row divs and the container are statically positioned.
I'm sorry if this has been asked somewhere before but I have looked through both this site and Google for hours and haven't found anything that seems to work.
Thanks in advance for any help!
EDIT3: For reference, the site I'm working on is here: http://utsa.edu/honors/?page=international/china_new
EDIT1: #Robert: Thanks for the class/id suggestion. Changed that. I don't believe the vertical centering you suggested is going to work though. Since your images are all the same size the padding & margins center them. Mine are all different heights.
EDIT2: #Nowhere: That was the first thing I tried. From what I've read, it's not working because the containing DIVs aren't positioned absolute. I don't know though.
.img-container img {vertical-align: middle ;} works fine for me with images of different heights and widths. Their vertical centers are correctly aligned...
If you don't find a solution within CSS, you might want to consider having a program generate images from the existing thumbnails: you convert them to images of the size of the biggest ones, surrounding the smaller ones with a transparent border (in a format that supports transparency like PNG).
I would use a combination of floating each image container left within the row div and auto center the images within the image container.
Here's how I might do it. I recommend you change any div id to a div class if you plan on using it more than once in your document.
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #666;
text-align: center;
}
#container {
background-color: #fff;
width: 960px;
margin: 0 auto;
overflow: hidden;
padding: 10px;
}
.row {
clear: both;
padding: 15px 0;
}
.img-container {
float: left;
width: 33%;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
</div>
</body>
I've got a large div. It contains a bunch of thumbnails. I'd like the thumbnails within the div to be centered inside the div, and the div to be centered on the page. But I'd also like the width of the div to be dynamic so you can see all the thumbnails on every resolution, centered. How could I achieve this?
here's what I have so far:
<div id="container">
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
</div>
I've tried centering it with this css:
The problem is I need an alternative to float:left that works to center so they all float around each other. What I currently have just floats them left so on the wrong browser width, they're not centered.
#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}
Any ideas on how to do something like float:center?
Firstly, you cannot give the same ID to all the children <div>; That is invalid HTML.
I'd do something like this:
#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}
<div id="container">
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
<div><img /></div>
</div>
Alternatively, you could just change all the <div>s to <span>s and remove the display:inline CSS directive. You could also completely remove the <div> or <span> idea and just apply the padding directly to the img tag.
EDIT: Seeing comments posted on another answer, it looks like my answer above still won't exactly help you. Is this the behavior you're trying to accomplish? http://jsfiddle.net/9KqQN/1
#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}
<div id="container">
<span>
<img />
<img />
<img />
<br />
<img />
</span>
</div>
Use display: inline-block on the thumb divs. This lets you treat them like any other piece of text, but retains their inherent "boxiness" for sizing:
#container {margin: auto; width: 80%; text-align: center; }
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }