I have been trying to center my container of images and have tried margin-left: auto; and margin-right: auto; in nearly everything related to the images.
Basically, I want it centered when I also scale down the page, it automatically moves some images down, but then I have a ton of blank space on the right side of my image.
Here is my HTML of my container:
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
Here is my current css:
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
vertical-align: middle;
}
.column img {
padding: 15px 15px 15px 15px;
}
Change
vertical-align: middle;
to
text-align: center;
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
text-align: center;
}
.column img {
padding: 15px 15px 15px 15px;
}
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
Related
Elements doesn't align to centre when margin: 0 auto; applied.
See the code here. https://jsfiddle.net/helloworld123/vhhx1o7n/
I have to align the elements in centre of page(.entry-wrap should be aligned to centre of the page) and its children(.entry) should be floated to left.
I have this working to some extent in fiddle https://jsfiddle.net/helloworld123/n8o18ges/ ,but I don't want the elements in third row to be aligned to center.
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
body {
background: #f8f8f8;
}
.entry-wrap {
width: 500px;
height: auto;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
This is what I want to achieve
1.) On .entry, use display: inline-block; instead of float: left;
2.) On .entry-wrap use text-align: center;
https://jsfiddle.net/fe6cmr07/
First of all, all the elements inside entry-wrap are floated, so entry-wrap is collapsing, to fix it, you can add overflow:hidden to it, or use a clearfix solution.
If you want the child elements to be centered, it's just a matter of playing with the width of the wrapping div:
body {
background: #f8f8f8;
}
.entry-wrap {
width: 620px;
margin: 0 auto;
padding: 15px;
background: #ccc;
overflow: hidden;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
fiddle: https://jsfiddle.net/o8aj3hqL/
your block with margin: 0 auto is in the center of <body>. the problem is with the child elements since they are floated and it won't be center aligned unless you use display: inline-block instead of float: left
here is the fiddle https://jsfiddle.net/vhhx1o7n/1/
body {
background: #f8f8f8;
}
.entry-wrap {
width: 618px;
height: 318px;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
Here is the code I am using so far. I have 6 images that I am trying to arrange and make responsive as well.
Idea is like this
image -blank space - image
image -----blank space -----image
image -blank space - image
When I squeeze the page they do not end up stacked uniformly on top of each other. The spaces need to go away so all I have is 6 images on top of each other. CSS below followed by html
.row:after {
content: "";
clear: both;
display: table;
}
/** North Scottsdale */
.nsdl {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break1 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** Scottsdale */
.sdl {
float: left;
margin: 0px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */
.tmpe {
float: left;
margin: 0 35px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break2 */
.break2 {
float: left;
margin: 10px;
padding: 10px;
width: 475px;
height: 200px;
border: 3px solid white;
}
/** Downtown */
.dtown {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** West Side */
.wside {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break3 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** UPTOWN */
.utown {
float: left;
margin: 0 120px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
<div class="row">
<div class="left">
<div class="nsdl" style="text-align: center;">
<h2> NORTH SCOTTSDALE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="sdl" style="text-align: center;">
<h2>SCOTTSDALE</h2>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="tmpe" style="text-align: center;">
<h2>TEMPE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="dtown" style="text-align: center;">
<h2>DOWNTOWN</h2>
</div>
</div>
<div class="left">
<div class="wside" style="text-align: center;">
<h2>WEST SIDE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="utown" style="text-align: center;">
<h2>UPTOWN</h2>
</div>
</div>
</div>
</div>
I would suggest looking at a number of frameworks like Bootstrap, Skeleton and Zurb Foundation and use their CSS grid components. Look into how they control the size of various page regions with media queries using a mobile first approach.
You can definitely roll your own solution too. Here's an example.
<div class="img-group">
<div class="img-holder">
<img src="http://placehold.it/300x300?text=1">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=2">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=3">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=4">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=5">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=6">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=7">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=8">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=9">
</div>
</div>
.img-group img {
display: block;
max-width: 100%;
}
.img-holder {
float: left;
width: 50%;
}
#media ( min-width: 448px ) {
.img-holder {
width: 33.333%;
padding: 0.75%;
}
}
#media ( min-width: 779px ) {
.img-holder {
box-sizing: border-box;
width: 25%;
padding: 2%;
}
}
Demo JSFiddle.
First you make your images responsive. The simplest version of doing so is setting them to display: block; and max-width: 100%;. Setting the max width means they'll try to take up their parent element's width as long as they don't exceed their own intrinsic width. For example, if the parent element is 700px wide and the image is 600px wide, it won't stretch to fit the 700px of space. It will stop at 600px.
Now you place your images in container elements that you'll control with media queries. Use percentage widths (i.e. width: 25%; ) so they stay nice and fluid.
You might be wondering what box-sizing: border-box; does. It says that padding should be included as a part of your width definition. Normally if you have width: 25%; padding: 1%; the total width of your element would be 27% as 1% + 25% + 1% = 27%.
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>
Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?
By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}
I am applying box shadow on the mainContent div which contains 6 other divs but the box shadow is applied to the section of the mainContent div just above the last two floating divs.
jsfiddle
HTML:
<div id="mainContent">
<div id="div1">
<h1>Welcome to the Archive </h1>
<h2>The Internet Archive, is a digital library of files and other cultural
artifacts in digital form.</h2>
</div>
<div class="div11">
<h3>Archive 1</h3>
<p>some info</p>
</div>
<div class="div12">
<h3>Archive 2</h3>
<p>info</p>
</div>
<div class="div13">
<h3>Archive 3</h3>
<p>info</p>
</div>
<div class="left">
<h4>Jasdasdasdasd</h4>
<p><em>some info on how to use the website</em>
</p>
</div>
<div class="right">
<h3>archive1</h3>
<p>Most recently added archives comes here</p>
<br />
<h3>asdasdsd</h3>
<p>Most recently added archives comes here</p>
</div>
</div>
CSS:
#mainContent {
width:970px;
padding-bottom:55px;
/*equal to footers height*/
background:#fff;
margin-bottom:10px;
padding:10px 10px 10px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow: 0 0 20px #ccc;
}
.left {
float: left;
width: 250px;
height:auto;
}
.right {
float: right;
width: 630px;
margin: 0 0 20px;
height:auto;
}
Add:
<div style="clear: both"></div>
at the bottom above the close of the div.
http://jsfiddle.net/3LxkY/2/
try this.............
#mainContent{
width:970px;
padding-bottom:55px;
/*equal to footers height*/
background:#fff;
margin-bottom:10px;
padding:10px 10px 10px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow: 0 0 20px #ccc;
overflow: hidden;
}
.left{
float: left;
width: 250px;
height:auto;
}
.right{
float: right;
width: 630px;
margin: 0 0 20px;
height:auto;
}