Here is example demo of my problem
http://www.bootply.com/tkrs6G3GlG
Basicly, I've got on the left form groups, and in each I've got large text giving some information and then asking user to select something (in example is only radio, but there are dropdown's and checkboxes as well). I would like that for every form group, options on the right are vertically align (in the middle) depending on text size. In example above, radio's are on top, but I would like them in the middle of corresponding form-group.
I've tried
.vcenter{vertical-align:middle;
}
but it's not working. I've also tried setting height of div which contains options
.maxHeight{
height:100%;
}
but div is not getting larger. I tried using large height and hide overflow, but not working.
Only thing that worked so far is using
.vcenter{
position:absolute;
vertical-align: middle;
}
but it only looks well on large screen, but after screen resizing, it's overlaping with text.
If your div is inside another div,try
#my_div{
margin-left: auto;
margin-right: auto;
width: /*put_your_width*/;
}
And if it is the parent div
#my_div{
display: table;
margin-right: auto;
margin-left: auto;
}
There are a few ways to do this. I usually use this method...
HTML
<div> <p>Center this text</p> </div>
CSS
div{
position: relative;
height: 500px;
width: 500px;
background: green;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
p{
position: absolute;
top:50%;
text-align:center;
display:inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
The way I prefer to do it is add margin: auto; and top, left, right, and bottom 0 like so:
.parent {
position: relative;
}
.child {
margin: auto;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
you can use many aproaches.
first one is with position
.parent_div{
position:relative;
width:500px;
height:500px;
}
.children_div{
position:absolute;
width:100px;
height:100px;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
-But you need to have specified the height and width of the child element.. so it is not good for fluid design.
Sec. aproach is the best i think it uses display :)
.parent_div{
display:table;
width:500px;
height:500px;
text-align:center;
}
.children_div{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
}
.children_children_div{
/*What ever... this div will be centered verticaly*/
}
Related
So I'm trying to get an element to align itself a certain percentage from the CENTER of the page.
So I've tried replacing where I'd usually put a percentage from either the left or the right with "center"
.aboutcredit {
z-index:-100000;
center:25%;
top:75%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
but no luck. Kind of what I'm trying to do here:
I don't know if you have noticed, but center:25%; does nothing. You probably want left:50%. Seeing as you want it to be moved 25%, make it left:75%; and that should be what you're looking for. Like so:
.aboutcredit {
width: 50px;
height: 50px;
background-color: black;
z-index: 1;
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%);
text-align: center;
vertical-align: middle;
}
<div class="aboutcredit"></div>
I've run into this several times, and the way I do it is to:
1. Set the element to position absolute
2. set the element using percentages to the area where you would like it, to center on page it would be left:50%, margin-left: -{width / 2}, but in this case it is left:75%, margin-left: -{width / 2}
.box {
height:400px;
width:400px;
border:1px solid black;
left: 75%;
margin-left:-200px;
position: absolute;
}
http://plnkr.co/edit/7j8DxiUUASrn8wQqBKNW?p=preview
.aboutcredit {
z-index:-100000;
left:50%;
top:50%;
transform:translateY(-50%) translateX(-50%);
position:fixed;
text-align:center;
vertical-align:middle;
}
http://jsfiddle.net/gerLkswu/1/
I'd live to position two divs in a container right next to each other which occupy 100% of the container together with a fixed amount of padding between the two. Is it possible to do so without knowing the width of either divs or using percentages. Hopefully this sample code will give some idea on what I'm trying to achieve.
http://jsfiddle.net/C2uTA/
.orange {
position:absolute;
top:0;
width:45%;
background-color:orange;
}
.yellow {
width:auto;
background-color:yellow;
}
<!--sample html-->
<div style="position:relative;width:100%">
<div class="orange">Orange Div</div>
<div class="yellow">I want this div to start 10px to the right of the orange div</div>
</div>
Try adding this to .yellow:
.yellow {
position: absolute;
right: 0;
top: 0;
width: 45%
You can simply play with percentages until you're satisfied with the space between the two.
Try using float:left; margin-right:(according to your convenience in your page) in the class for yellow to place the orange and yellow next to each other in the container.
And as Davion said, you play with percentages and then you will get your spaces perfectly.
Try using following css code:
.orange {
background-color:orange;
position: absolute;
top: 0;
left: 0;
right: 50%;
}
.yellow {
position: relative;
left: 50%;
top: 0;
background-color:yellow;
width: 48%;
margin-left: 2%;
}
Hope it should help you in achieving your purpose.
I'm wanting to get an image overflowing a div, whilst not distrupting flow of text.
You can see it live at http://songbundle.org*
Example image above. Currently the text and form move right and lose their centering due to the image.
My current code below:
HTML:
<div class="box">
<div id="boxarrow"></div>
<p>text goes here</p>
</div>
CSS:
.box {
margin:60px auto 0 auto;
width:240px;
border:solid 1px #7889BC;
background-color: #AEB8D7;
text-align:center;
}
#boxarrow {
background:url(image/arrow.png);
width:77px;
height:81px;
display:block;
margin-left:-60px;
float:left;
}
Your help is appreciated!
Hey there,
One solution you could try would be to apply position: relative; to your .box element and position: absolute; to your #boxarrow element. This will take the #boxarrow element out of the normal flow of the document, leaving other elements unaffected by its positioning.
Then, you can adjust it's position (relative to the .box element, since we gave it position: relative;) with top, right, left, and bottom. So, your #boxarrow element might end up looking something like this:
#boxarrow {
position: absolute;
top: 30px;
left: 20px;
}
Again, this is just one possible solution, but it seems as though it would work best considering your situation.
Hope this helps!
remove
margin-left:-60px; float:left;
from your #boxarrow and add
left:-60px; position:absolute;
Then add
position:relative;
to your .box
Final result:
.box {
background-color: #AEB8D7;
border: 1px solid #7889BC;
margin: 60px auto 0 auto;
position: relative;
text-align: center;
width: 240px;
}
#boxarrow {
background: url("image/arrow.png");
display: block;
height: 81px;
left: -60px;
position: absolute;
width: 77px;
}
Just change the positioning to absolute like this...
#boxarrow {background:url(image/arrow.png); width:77px; height:81px; display:block; margin-left:-60px; float:left;position: absolute;}
I'm trying to make it so that both the image and links stay in the browser window all the time. This is the site. When loading it on an iPad, the centred content is bigger than the window as shown .
I'd like it to display like (obviously without black borders). Is this possible?
The trick to center an element without any additional markup, is to use translate:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Here's the fiddle: http://jsfiddle.net/QE8KV/
P.S. Don't forget the vendor prefixes.
The proble of Joseph Silber's answer is that if the window is smaller than your content, the content gets cutted.
Then you can use a trick with floating: http://jsfiddle.net/QE8KV/2/
HTML:
<div id="top"></div>
<div id="center">Text</div>
CSS:
html,body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#top {
float: left;
height: 50%;
margin-top: -150px;
width: 100%;
}
#center{
background: #2D285E;
box-shadow: 1px 1px 4px #231E5C;
color:white;
width: 300px;
height: 300px;
margin:0 auto;
clear:both;
}
Hey, I am guessing that this is probably fairly trivial, but I am having difficulty finding an answer or figuring it out nonetheless.
I'm trying to create a grid of colored squares with arbitrary spacing between them.
This in itself is easy to do, especially because I need only nine squares. But while
I look at my completed code, I cannot help but feel there is a far more simple and efficient way to accomplish this.
At the moment, I have nine different IDs declared in my css, one for each square.
div.container{
position:relative;
left:50px;
top:50px;
background-color:rgb(45,45,45);
height:300px;
width:300px;
}
#square{
position:absolute;
background-color:rgb(52,82,222);
left:20px;
top:20px;
height:80px
width:80px
#square2{
position:absolute;
background-color:rgb(58,82,22);
left:110px;
top:20px;
height:80px;
width:80px;
etc etc etc
What I would like to do is find a more efficient way to do this.
Thanks for the help!
You can use a class for the squares that share a property:
.square {
position: absolute;
width: 80px;
height: 80px;
}
Is there a specific reason you're absolutely positioning them though? Sounds like a job better suited for floats.
div.container {
width: 240px;
}
.square {
float: left;
width: 80px;
height: 80px;
}
Assuming that the inner squares are divs, there are no other divs inside your container, and each inner div should be the same width and height, this is what I'd do:
.container {
position: relative;
left: 50px;
top: 50px;
background: rgb(45,45,45);
height: 300px;
width: 300px;
}
.container > div {
position: absolute;
background-color: rgb(52,82,222);
height: 80px;
width: 80px;
}
#square1 {
left: 20px;
top: 20px;
}
#square2 {
left: 110px;
top: 20px;
}
..
If you need separate top and left properties for each div, then you have no choice but to use ids.
You can avoid having to add a class thanks to using .container > div, which selects all div elements that are direct children of .container.
The HTML would look like this:
<div class="container">
<div id="square1"></div>
<div id="square2"></div>
..
</div>
Why not give all of the squares the same class and apply something like
.square
{
display: inline-block;
width: 80px;
height: 80px;
zoom: 1;
*display: inline /* for IE */
}
That should make all of the blocks wrap nicely without having to add styles for each individual.