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>
Related
I'm trying to align div horizontally for far too long now.
The thing is, I set the width property but it doesn't seems to do anything.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
width: 100%;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big">Hello, Jean-Michel</div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span ></div>
</div>
Does anybody have a clue ?
The divs keep stacking on the left of the container div.
.vtab
{
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 14px 14px;
display: table;
width: 100%;
box-sizing: border-box;
}
.vtab div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.vtab div.left
{
width: 25%;
color:green;
}
.vtab div.middle
{
width: 50%;
color:yellow;
}
.vtab div.right
{
width: 25%;
color:red;
}
<div class="vtab">
<div class="left big"><span>Hello, Jean-Michel</span></div>
<div class="middle"><img src="resources/img/banner.png" alt="Company banner" height="75px"/></div>
<div class="right big"><span class="ti-shopping-cart"> 00.00$</span></div>
</div>
you can achieve that using display:flex; and align-items:center;
.vtab {
display: flex;
align-items: center;
}
My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;
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%;
#content
{
background-color: red;
text-align: center;
}
#content div
{
float: left;
background-color: green;
padding: 10px;
margin: 10px;
}
<div id="content">
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
</div>
<div style="clear: both;"></div>
http://jsfiddle.net/nTLny/
here the usual code. I want to achieve the following:
so the aligned div goes center.
Text-align center will work if you use display:inline-block instead of using float
JSfiddle
CSs
#content div
{
display: inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
#content div
{
float: none;
display:inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
Try it...
#content div {
background-color: #008000;
display: inline-block;
margin: 10px;
padding: 10px;
}
your css:
#content{
background-color:white ;
text-align: center;
width:300px; /*giving it a width so it actually adjust to your sample image 300px seems to be close to yours*/
}
#content div
{
display: inline-block; /*second adjustment you need as "Abhineet" has mentioned*/
background-color: green;
padding: 10px;
margin: 10px;
}
#bottom {
float:right;
}
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