I've been trying to center the images within a div on my page.
Relevant HTML:
<div class="imgblock">
<div class="basket slide1"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
<div class="infos"></div>
</div>
</a></div>
<div class="steak slide2"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="col1-4 slide3"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="fish slide4"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
</div>
Relevant CSS:
.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}
In my research I was told to add text-align:center and vertical-align:middle. This didn't work, I also tried margin-left:auto and margin-right:auto.
Thanks for your help.
since your image are floatting, you can only reduce width of .imgblock and use auto margin :
.imgblock {
width:830px;
margin:0 auto;;
}
As #mdesdev has said, the recommended way to center block items is through:
margin: 0 auto;
That goes for your images as well. I would do something like this (untested):
.imgblock img{
display: block;
margin: 0 auto;
}
You could probably do without some of the surrounding div's as well.
you can try
.basket {
margin: 0 10px 0 320px;
width: 300px;
}
Related
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I all, i've this part of code
HTML:
<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" />
<div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" />
<div class="feature-content icon-offset">
<h4>Kollaboration</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" />
<div class="feature-content icon-offset">
<h4>Archiv</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" />
<div class="feature-content icon-offset">
<h4>Wertsachen</h4>
</div>
</div>
</div>
</div>
CSS:
.feature { margin-right: 2rem; }
What i need is
1: to center the class="feature" elements in the middle
2: have a bit of space between that elements (as is it now).
But this is result:
How can i solve it?
(Demo): https://jsfiddle.net/kf3u042k/
You can change css somthing like this
.modular .features .feature {
display: block;
float: left;
margin-bottom: 1rem;
margin-top: 2rem;
vertical-align: top;
width: 24%;
}
.feature {
margin-right: 15px;
}
Try to add this code into your stylesheet. .feature{
margin-left:auto;
margin-right:auto;
max-width:900px;
}
You have to fix the width and then put your side margin on auto. It would be something like this:
.feature{
max-width:900px;
margin-left:auto;
margin-right:auto;
padding-left: x px;
}
for the space just ad a padding-left on your feature (cf code). Still if your width is not large enough it will go bad
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}
I'm trying to make something like this. Any help will be greatly appreciated.
(can't paste the image due to 2 missing points of reputation ;) ) http://i.stack.imgur.com/p7xhr.jpg
I'm sorry I've given an impression like I don't know what I'm doing at all and I want someone else to do my work for me. I did try various solutions none of which seems to work.
on jfsfiddle it seems to work, but when I check on the actual site the top right image gets moved to another row
http://jsfiddle.net/37GAn/1/
html
<div>
<div class="image">
<img src="image.jpg" width="98" height="203"/>
</div>
<div class="image">
<img src="image.jpg" width="85" height="203"/>
</div>
<div class="clear"></div>
</div>
<div>
<div class="image">
<img src="image.jpg" width="130" height="210"/>
</div>
<div class="image">
<img src="image.jpg" width="69" height="197"/>
</div>
<div class="clear"></div>
</div>
css
.image {
float: left;
width: 100px;
margin-top:50px;
margin-left:280px;
}
This is just to give you a round-about idea.
You'll need your HTML as such:
<div id="contentHolder">
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
</div>
and CSS as such:
* {
margin:0;
padding:0;
}
#contentHolder {
background-color:Gray;
height:100%;
padding:40px 10px;
}
.row {
height:250px;
width:100%;
margin-bottom:30px;
}
.row > div {
display:inline-block;
width:48%;
height:inherit;
vertical-align:top;
}
.image {
background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
height:160px;
width:70%;
margin:20px auto;
border-radius:10px;
}
.textHolder {
color:White;
width:50%;
height:20px;
margin:0 auto;
}
This should work for you. This may still need some work as I have not tried to make it inch-perfect. That I'll leave it to you!!! :)
You can see that here:http://jsfiddle.net/a7zLW/
Hope this helps!!!