I'm trying to center divs using these code but it's just centering vertical.
I want them horizontal.
HTML
<div class='test'>
<div class='test1'>
<img class='gamespic' src='img/{$row['pictures']}'></div>
</div>
CSS
.test{
width: 100%;
text-align: center;
}
.test1 {
width: 220px;
height: 300px;
border: solid 2px #000;
content: '';
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
position:relative;
}
change your CSS like this, I have also added full page coverage just in case (but you can remove it)
.test {
width: 100%;
height:100%;
text-align: center;
top:0;
left:0;
right:0;
bottom:0;
background:#fc0;
position:absolute;
}
.test1 {
width: 220px;
height: 300px;
border: solid 2px #000;
content:'';
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-110px;
}
See bootply here
Related
i want to ask you. I'm trying to create a border using pseudo element (after). I want to place a border in the middle of the div box that I have created, without setting (top, bottom) and (left, right). Can it be automated in the middle?
My Codepen
<div class="box">
</div>
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
&::after{
content:'';
position:absolute;
border:2px solid #fff;
height:90%;
width:90%;
}
}
I've used percentages for the top and left and than correect the positioning with transform: translate(-50%, -50%); so its in the middle
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
}
.box::after{
content:'';
position:absolute;
border:2px solid #fff;
height:90%;
width:90%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
<div class="box"></div>
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
}
.box:after {
content: '';
position: absolute;
border: 2px solid #fff;
top: 3%;
left: 4%;
height: 93%;
width: 90%;
}
<div class="box">
</div>
Yes it can:
.box {
width: 500px;
height: 500px;
position: relative;
background-color: blue;
padding: 10px;
}
.box:after {
content: '';
position: absolute;
display: block;
width: 95%;
height: 95%;
border: 1px solid #FFF;
}
<div class="box">
</div>
Allthough I don't completely understand why you wouldn't want to use top, right, bottom, left values. With transform, you can't automate it ALWAYS. You'll have to set it to half the height of the box. With a top value, you could just set it to 50%.
There are couple of ways....!!
.box{
height:500px;
width:300px;
background-color:red;
position:relative;
&::after{
content:'';
position:absolute;
border:2px solid blue;
height:90%;
width:90%;
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
}
}
Another way...without using positions.
.box{
height:500px;
width:300px;
background-color:red;
display: flex;
&::after{
content:'';
border:2px solid blue;
height:90%;
width:90%;
margin: auto;
}
}
You can use flexbox on the .box element to center its contents. Just make sure no other position property is set on the ::after pseudo-element:
.box {
height: 500px;
width: 300px;
background-color: red;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.box::after {
content: '';
position: absolute;
border: 2px solid #fff;
height: 90%;
width: 90%;
}
I'm developing ionic 2 app.
I'm looking to make profile picture in circle but it's not works fine.
I want it to be in the middle with border circle and white color.
html code
<div class="splash-info">
<div class="wrapper">
<img src="{{photo}}">
</div>
css code
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
position: relative;
width:100%;
height:auto;
transform: translate(-50%,-50%);
}
.splash-info {
position: relative;
z-index: 2;
margin-top: -64px;
margin-bottom: 30px;
text-align: center;
font-size:15px;
font-weight:bold;
}
Just remove the transform: translate(-50%,-50%); from the img css. I also removed the negative margin you had on splash-info just for the purposes of this demo(so that the image wouldn't be cut off at the top).
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
position: relative;
width:100%;
height:auto;
}
.splash-info {
background:#000;
position: relative;
z-index: 2;
margin-bottom: 30px;
text-align: center;
font-size:15px;
font-weight:bold;
}
<div class="splash-info">
<div class="wrapper">
<img src="http://placehold.it/128x128">
</div>
</div>
Solution, image position absolute inside parent: https://jsfiddle.net/209de4hu/
.wrapper{
width:128px;
height:128px;
position: relative;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
border: 5px solid white;
}
.wrapper img{
right:50%;
position:absolute;
}
.splash-info {
position: relative;
z-index: 2;
text-align: center;
font-size:15px;
font-weight:bold;
}
<div class="splash-info">
<div class="wrapper">
<img src="http://www.ricoh-imaging.co.jp/common/img/header-logo2_en.jpg">
</div>
</div>
I am new at CSS positioning but could not understand of positioning the boxes.
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
position:absolute;
top:70px;
left:30px;
}
Demo
If I do not set the .box position, third box is appearing up front.
If I set the .box position as relative, third box is appearing under box
If I set set third box position as relative, it goes right.
What is the inner div position rule?
Remove position:absolute; from .third and it will look like This
Snippet:
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
top:70px;
left:30px;
}
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
hi just remove the third box position absolute and check it and it will be look like this then
I'm trying to make such a stuff
But somehow I got something like the one below(Please ignore the color, font family for now)
My code is here.
HTML:
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
CSS:
.box{
background-color:red;
width:60%;
margin-left:20%;
height:30px;
z-index:3;
position:static;
}
.box p{
text-align:center;
color:white;
line-height:30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index:-1;
margin-top:-15px;
position:static;
}
Change position: static to position: relative for the box.
CSS-Tricks reference
z-index only effects elements that have a position value other than
static (the default).
.box {
background-color: red;
width: 60%;
margin-left: 20%;
height: 30px;
z-index: 3;
position: relative;
}
.box p {
text-align: center;
color: white;
line-height: 30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index: -1;
margin-top: -15px;
position: static;
}
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
I tried to make it exactly like the image you put.
Whenever you want to put an HTML element above or beneath another element, use the z-index property. The more the value of the z-index, it will be more on the above, and vice versa
.box{
background-color: #F8931F;
position: absolute;
width: 200px;
text-align: center;
color: #fff;
padding: 5px;
text-transform: uppercase;
left: 50%;
top: 40px;
transform: translate(-50%,0);
}
.seperator{
width: 100%;
height: 2px;
position: absolute;
background-color: #F8931F;
top: 52px;
z-index: -1;
}
<div class="box">instagram photos</div>
<div class="seperator"></div>
One suggestion is to use :after for the border.
.box{
height:30px;
z-index:3;
position:static;
}
.box p{
background-color:red;
text-align:center;
color:white;
line-height:30px;
margin: 0;
margin-left:20%;
width:60%;
}
.box:after{
border-top: 1px solid red;
border-bottom: 1px solid blue;
content: '';
display: block;
z-index:-1;
top:-15px;
position: relative;
width: 100%;
height: 0px;
}
<div class="box">
<p>Instagram Photo</p>
</div>
http://jsfiddle.net/afelixj/nrEfm/50/
CODE:
.company-logo-wrap{
display: block;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
}
Tried inline block, float etc, couldn't get it work..
I cannot use padding / margin as it's user upload img, so the size is not always the same.
FIDDLE
You can use vertical-align: middle property, which will work only with display: table-cell/table
.company-logo-wrap{
display: table-cell;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
vertical-align: middle;
}
JSFiddle
Use display:table and table-cell
.company-logo-wrap{
display:table;
background: #fff;
margin-left: -15px;
border: 1px solid red;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner{
display:table-cell;
vertical-align:middle;
background:grey
}
DEMO
Use following Css
.company-logo-wrap{
display: table;
background: #fff;
margin-left: -15px;
padding: 10px;
border: 1px solid #a5a5a5;
text-align: center;
height: 400px;
width:100%
}
.company-logo-inner {
display: table-cell;
vertical-align: middle;
}
HTML
<div class="main">
<div class="box"></div>
</div>
CSS
.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }
/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }
Check this http://jsfiddle.net/SxxWV/11/