This question has been asked may times but I am still having no luck with it. I have a container that loads thumbnails into. I am trying to have the thumbnails' margins set to auto but I have has no luck with this.
The thumbs will center inside the container but the margins will not.
.align-contents{
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.profile.align{
display: inline-block;
position:relative;
margin:auto auto;
}
.profile{
text-align:center;
height:auto;
}
.profile.align .PP{
width:60px;
height:60px;
border:solid 3px #FFF;
-moz-border-radius:200px;
-webkit-border-radius:200px;
border-radius:200px;
position:relative;
z-index:1;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-image:url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status{
width:20px;
height:20px;
right:0px;
position:absolute;
bottom:0px;
border:solid 3px #FFF;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:blue;
z-index:2;
}
JS Fiddle
The thumbnails center in side the parent but is there a way I can set margin:auto so have the space between the divs set automatically
Flexbox can do that.
.align-contents {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.profile.align {
position: relative;
border: 1px solid grey;
}
.profile {
text-align: center;
height: auto;
}
.profile.align .PP {
width: 60px;
height: 60px;
border: solid 3px #FFF;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status {
width: 20px;
height: 20px;
right: 0px;
position: absolute;
bottom: 0px;
border: solid 3px #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: blue;
z-index: 2;
}
<div class="align-contents">
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
</div>
The problem might be margin:auto auto; instead of margin:0 auto; in .profile-align. If that's not the case try changing it to margin: 50%;
Related
My css and html looks like below. mRow is the main div and within that is my mRowLeft and mRowRight.
However instead of left and right I see them appear top left and bottom right.
div.mRow {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: left;
text-align:left;
width: 350px;
/*border:1px solid green;*/
}
.mRowLeft {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: left;
text-align:left;
width: 48%;
/*border:1px solid green;*/
}
.mRowRight {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: right;
text-align:left;
width: 48%;
/*border:1px solid green;*/
}
///....
<div class="mRow">
<div class="mRowLeft"></div> --label
<div class="mRowLeft"></div> --10rows
<div class="mRowRight"></div> --label
<div class="mRowRight"></div> --10rows
</div>
...//
You should be putting your label and content under the same left/right div.
<div class="mRow">
<div class="mRowLeft">
<div>--label</div>
<div>10rows</div>
</div>
<div class="mRowRight">
<div>label</div>
<div>10rows</div>
</div>
</div>
Then you can either use inline-blocks:
.mRow {
white-space: nowrap;
width: 350px;
}
.mRowLeft,
.mRowRight {
display: inline-block;
white-space: normal;
width: 50%;
}
or use flexbox:
.mRow {
display: flex;
flex-direction: row;
width: 350px;
}
.mRowLeft,
.mRowRight {
width: 50%;
}
.mRow
{
display:flex;
justify-content:space-around;
}
<div class="mRow">
<div class="mRowLeft">
dfsf
<div class="mRowLeft">sdfvs</div>
</div>
<div class="mRowRight">
sdfs
<div class="mRowRight">sdfsd</div>
</div>
</div>
I have a few elements inside a div. i want to align them center
vertically and horizontally. as if they where in one line like this
I've tried following several stackoverflow samples margin auto and many
other as you will see on my css file but no luck if you can please just put the answer and explain how is working it will help a lot. thanks.
<div id="tiritaContainer">
<div class="tirita">
<div class="tiritas"><img id="tirita1"
src="assets/pictures/Front house.jpg" alt=""/></div>
<div class="tiritas"><img id="tirita2"
src="assets/pictures/28.jpg" alt="" ></div>
<div class="tiritas"><img id="tirita3"
src="assets/pictures/27.jpg" alt="" ></div>
</div>
<img class="next" src="assets/pictures/arrow-right.png"
alt=""/>
</div>
*{margin:0px;
padding: 0px;
}
nav{
position:absolute;
left:0px;
width:100%;
background-color: #3333ff;
height: 40px;
text-align: center;
}
nav ul{
margin: 0;
padding:0;
display: inline-block;
}
.nav li{
text-align: center;
list-style-type: none;
float: left;
width: 150px;
}
.nav li a{
text-decoration: none;
text-align: center;
font-size: 150%;
color: yellow;
line-height: 40px; /*set same as height in nav to center line
vertically.*/
display:block;
}
.nav li a:hover{
background-color: chartreuse;
color:black;
}
#logo{
width:20%;
border-radius: 35%;
margin-top: auto;
margin-bottom: auto;
}
#mainImg{
height: 65vh;
width: 50vw;
border: 3px solid black;
margin-left:auto;
margin-right: auto;
}
.tirita{
/*display:block;*/
margin: 0 auto;
height: 105px;
width:400px;
}
#gallery img{
display: none;
}
.tiritas img{
height:100px;
width: 100px;
border: 3px solid blue;
float:left;
}
.tiritas:hover{
cursor: pointer;
border-color: red;
transform: scale(1.5);
}
center{
padding:2%;
}
.prev,.next{
vertical-align: middle;
}
.prev{
float:left;
margin: 0 auto;
}
.next{
float:right;
}
#tiritaContainer{
display: inline-blockblock;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
i want to have the left and right arrow in the same row aligned center
both vertical and horizontally
You can use flexbox to make a layout easily. What you need here is display:flex and justify-content:center for horizontal alignment and align-items:center for vertical alignment.
*{box-sizing:border-box}
.container{width:100%;display:flex;justify-content:center;align-items:center;border:1px red solid}
img{display:block;width:100px;margin:10px}
<div class="container">
<img src="http://via.placeholder.com/100x150/fff000" alt="">
<img src="http://via.placeholder.com/100x100/ff0000" alt="">
<img src="http://via.placeholder.com/100x120/0000ff" alt="">
</div>
The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
So I have this code:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
width: 200px;
height: 200px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
background: red;
}
.img-circular1{
background-image: url('/Images/learn.jpg');
}
.img-circular2{
background-image: url('/Images/watch.jpg');
}
.img-circular3{
background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px;
position: relative;
margin-left:auto;
margin-right:auto;
width:70%;
background-color: green;
overflow: auto;
bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>
I have no managed to get 2 of them to show in a green box. But the third (which I duplicated before and after the other 2) will not show for some reason?
Also, they are not equidistant apart - how can I get them an equal spacing apart?
Please help
NOTE: Instead of images there are red circles, just for visibility reasons.
Apply float: left on images themself, not on container:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
/*width: 200px;*/
/*height: 200px;*/
width: 100px;
height: 100px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
}
.img-circular1{
background-image: url('/Imageslearn.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
background-image: url('/Images/watch.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
background-image: url('/Images/practice.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.container1{
left: 15%;
width: 70%;
/* float: left; */
height: 300px;
position: relative;
}
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
To answer your second question:
wrap circles in some other div
make their width be some percentage value and float them left
set margin on circles to margin: 0 auto.
Here is prototype for you to study:
#green {
background: green;
padding: 10px;
overflow: auto;
}
#blue {
background: blue;
width: 50%;
float: left;
border: 1px solid #fff;
box-sizing: border-box; /*good for when there is border or padding*/
}
#red {
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
</div>
I updated your code to use FlexBox. Since you want your circles to be equally spaced across the row, float: left won't help much. I had to add a wrapper div around each circle div so that it could expand to fill the space without distorting the circles.
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
<div class="wrap">
<div class="img-circular1"></div>
</div>
</div>
I have this layout:
<div id="container">
<div id="sidebar">
<div id="logo"></div>
<div id="box"></div>
</div>
<div id="content">
<div id="gallery">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
And here is the CSS:
#container {
background-color: black;
display:block;
position:absolute;
height:auto;
width:auto;
bottom:0;
top:0;
left:0;
right:0;
overflow:hidden;
background-size:auto 100%;
margin:50px;
}
#sidebar {
background-color: purple;
min-width: 250px;
width:250px;
max-width: 20%;
height:100%;
overflow:hidden;
float:left;
}
#logo {
height: 100px;
background-color: orange;
}
#box {
bottom: 20px;
font-family: sans-serif;
font-size: 10px;
color: grey;
margin: 20px;
padding: 10px;
background-color: white;
overflow-y: scroll;
text-align: justify;
}
#content {
display:inline;
width:75%;
margin-left: 300px;
padding: 0px;
margin:0px;
text-align: center;
background-color: green;
overflow-y: scroll;
}
#gallery {
margin-left: auto;
margin-right: auto;
display: table;
background-color: blue;
}
.thumb {
width: 200px;
height: 150px;
display: inline-block;
background-color: black;
margin: 20px;
border: 7px solid white;
overflow:hidden;
background-color: yellow;
}
I need the content of the #box and either #gallery or #content to be scrollable vertically.
Because my layout is responsible and the overflow of the #container is hidden I think there must be some problem with these features.
Here I created a jsFIddle to illustrate the problem.
You can add this in CSS #box
max-height : 100px ; /*for example*/
EDIT :
for you can use
overflow: auto;
in DIV you want to scroll