My HTML looks like this:
<div class="item">
<div class="check">
<input type="checkbox">
</div>
<div class="descr"> ... </div>
<div class="details"> ... </div>
</div>
How do I align the checkbox in the middle of the div.check, both horizontally and vertically? (the height of the ".item" div is dynamic)
Here is an edit of Kilian Stinson code that does not require CSS3 support.
Instead of translate I use em's:
HTML:
<div class="check">
<input class="center" type="checkbox">
</div>
CSS:
.check {
width: 40px;
height: 80px;
outline: 1px solid red;
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
}
JSFiddle: http://jsfiddle.net/Yzhnf/4/
Try to translate it with css3
HTML
<input class="center" type="checkbox">
CSS
.check {
position: relative;
}
.center {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
See this Fiddle with a working example.
At first, the element is positioned 50% from the left and 50% from the top. Then it's set back 50% of its own width and height.
For browser support get more information on caniuse.com.
position:relative; margin-left:auto; margin-right:auto; top..bottom etc
if that doesnt work
position:absolute; left:50%; right:50%;
Related
In the middle of the page is where I need the textboxes
horizontal plus vertical center is troublesome.
first center horizontally by making your parent display: flex
and include two bracketting children that stretch flex: 1 as well as your centered element (this allows it to be a perfect third, if you want it to instead be bigger, remove flex: 1 for the center child and put a width in percentage instead (pixel works but will not scale))
then center vertically by adding a margin top where you calculate leftover size :
.centeredchild {
background-color: red;
height: 20px;
flex: 1;
text-align: center;
margin-top: calc(50vh - 10px);
}
.centeringaid {
flex: 1;
}
.parent {
width: 100%;
height: 100vh;
display: flex;
background-color: lightblue;
}
<div class="parent">
<div class="centeringaid"></div>
<div class="centeredchild">hi</div>
<div class="centeringaid"></div>
</div>
there's also the more common method : https://www.w3schools.com/howto/howto_css_center-vertical.asp
this website, by the way is full of usefull tidbits.
Refer below code snippet to align your multiple text boxes in the middle of the page. (Consider page height to be 400px)
.main-div {
height: 400px;
position: relative;
}
.sub-div {
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
input[type="text"] {
margin:10px auto;
border: 1px solid gray;
}
<div class="main-div">
<div class="sub-div">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
You use this code:
CSS:
.outercontainer {
height: 200px;
position: relative;
border: 3px solid green;
}
.innercontainer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
<div class="outercontainer">
<div class="innercontainer">
<p>This sentance is it the middle!</p>
</div>
</div>
How do you vertically centered a text in the middle of a banner container with image tag?
My search result is using display:table/display:table-cell or display:inline-block but those solution didn't work when we have image tag.
I think I have to have position absolute for text but then how to make sure it's always vertically and horizontally centered when re-sizing window?
Here is html:
<div class="banner">
<img class="" src="http://placehold.it/1440x410">
<div class="container">
<div class="banner-text">
<h1>Header Text</h1>
<h3>Sub Header Text</h3>
CTA
</div>
</div>
</div>
and Css as below:
.banner{
width: 100%;
position: relative;
}
.banner img{
width: 100%;
}
.container{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.banner-text{
position: absolute;
top: 50%;
left: 50%;
}
http://codepen.io/neginbasiri/pen/grEmMx
I am wondering whats your solution for this?
Thanks
just add this transform to the class listed here:
.banner-text{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); /* or of course - translate(-50%, -50%); */
}
Fork Demo
Check out this guide for more info: Centering in CSS
The most concise way to do what you need is the following:
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add me */
}
I'm trying to vertically align the first div at the center of the browser and everything below it below that div.
I may be able to wrap these two divs in another div and centering that div may work, but I can't change this html structure and have to achieve with two divs only. The first div is a dynamic container where different html will be displayed. The second div is static.
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Add width and margin: auto 0 to the css class and apply it to the div elements.
like this:
.center {
margin: 0 auto;
width: 200px;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>
This should work (I added the color only to make it easier to see the result)
.center {
width:750px;
margin-left: auto;
margin-right: auto;
background-color:Red;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Summary:
You can use this code that is in the jsfiddle.
I wrote two classes named .center-x and .center-y. You can use these classes when you want to center elements by x and y axes.
The code:
.box-1 {
background: #00adef;
padding: 5px 10px;
}
.box-2 {
background: #ccc;
padding: 5px 10px;
position: absolute;
top: 100%;
width: 170px;
}
.center-y {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-x {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-x.center-y {
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="box-1 center-y center-x">
I'm at the center of the Browser!
<div class="box-2 center-x">I'm just below the center!</div>
</div>
And if you want to center by vertical, just remove the .center-x class from .box-1. Else if you want to center by horizontal, just remove the .center-x class from .box-1.
If the browser supports viewport units, you can use this way:
.center {
position: relative;
left: 0;
margin-top:50vh;
}
See it working: http://jsfiddle.net/fgpqkrr4/
I have a main div (the red div in the fiddle) that has a smaller vertical tab on the side (the blue div in the fiddle).
The RED div is standard BUT the Blue div is rotated through 90 degrees (as I need to have vertical text in it). This is where the problems starts.
The red div is vertically positioned at 50% so it is in the middle of the page and locked with scrolling etc.
I want to align the blue div so that the top edge of the blue div is at the same Y position as the top edge of the red div.
I would prefer NOT to use jQuery but can do if required.
Desired output :
Fiddle is here : http://jsfiddle.net/kBKf6/
Here is the code I am using :
<div id="main" style="position: fixed; top: 50%; margin-top: -250px; left:0; height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>
You don't need JS to align the rotated div. You can define a transform origin in CSS then, it becomes easy to align.
Side note : You can remove the -moz- and -o- vendor prefixes see caniuse
DEMO
HTML :
<div id="main">Main Content Div
<div id="verticaldiv">Side Tab</div>
</div>
CSS :
#main {
position: fixed;
top: 50%;
margin-top: -250px;
left:0;
height: 500px;
width: 450px;
background-color:red;
}
#verticaldiv {
overflow:hidden;
position: absolute;
left:100%;
bottom:100%;
height:40px;
width:200px;
background-color:blue;
text-align:center;
color:white;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-ms-transform-origin:0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
You can also do it without relying on hardcoded sizes that move your div into position, but you need a wrapper around your .verticaldiv
demo:
http://jsfiddle.net/MCr6f/
demo 2:
http://jsfiddle.net/9LtKw/ (to show that different sizes don't matter)
html:
<div class="one">
Hello
<div class="pivot">
<div class="two">
Pretty!
</div>
</div>
</div>
css:
.one {
background: red;
position: relative;
float: left;
/*strange and difficult sizes*/
font-size: 3.237827em;
padding: 10px;
}
.pivot {
position: absolute;
top: 0;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
width: 0px;
height: 0px;
}
.two {
background: blue;
color: white;
position: absolute;
left: 0;
bottom: 0;
/*strange and difficult sizes*/
font-size: 12px;
padding: 0.3em;
}
How to center align img with absolute positioning in div or table cell if I dont know width of image?
for example
<div style="position: relative">
<img style="position: absolute" />
</div>
Aligns the element horizontal and vertical to the relative parent.
<div style="position: relative">
<img class="centered" />
</div>
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
'top' and 'left' set to 50% will center the top-left-corner of the element. Translating is by -50% for both X and Y sets the element to the exact center of the parent.
For browser support take a look here:
Translate2d - caniuse.com
You can use the negative margin trick, assumed you know the dimensions of the image:
img{
top:50%;
left:50%;
margin-left : -(<imagewidth>/2)px;
margin-height: -(<imageheight>/2)px;
}
when you only target browsers which support the calc() feature you could do:
img{
top: calc(50% - <imagewidth>/2px);
left: calc(50% - <imageheight>/2px);
}
When the browser supports translation you can translate it -50% of the image-dimensions:
img{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
If none of that is possible, your last resort is altered markup and display:table:
<div>
<div>
<img />
</div>
</div>
div{height:100%;width:100%;
display:table;
text-align: center;
vertical-align: middle;}
div>div{
display:table-cell;
}
see Demo for latest case
img {
display: block;
margin: 0 auto;
}
Check this JSFIDDLE1
or
div {
position: relative;
text-aligm: center;
width:2000px;
}
img {
position: absolute;
}
Check this JSFIDDLE2
Simple way to center an image vertically
if you know the height of div. then you can do image as vertical align.
div{
text-align:center;
height:150px;
line-height: 150px;
}
img{
vertical-align: middle;
}