how to make centre align divs vertically and horizontally? - javascript

could you please tell me how to make centre align divs vertically and horizontally ? I Have two divs I need to display on centre of page .Secondly there is some margin between the two divs how to remove that margin here is my code
<div style="height:100px;width:100px;border:1px solid red;"class="moreinfo">
</div>
<div style="height:100px;width:100px;border:1px solid red" class="moreinfo">
</div>
https://jsfiddle.net/tbnd90fd/
I do like that
https://jsfiddle.net/tbnd90fd/1/
best way?
.maindiv{
text-align: center;
position: absolute;
left: 45%;
top: 45%;
}
I give top and left ..is it the best way ? and how to remove margins?

From .maindiv remove text-align, set left and right to 50% and, finally, add one more line transform:translate(-50%, -50%);.
By this way, maindiv upper left corner will be placed in the center and transform will "pull" back up and left for half size of itself (and You don't need margin:auto anymore).
There is example :
.moreinfo {
display: inline-block;
margin:0px;
padding:0px;
}
.maindiv
{
position: absolute;
left: 50%;
top: 50%;
margin:0;padding:0;
transform:translate(-50%,-50%);
}
<div class="maindiv">
<div style="height:100px;width:100px;border:1px solid red;"class="moreinfo"></div><div style="height:100px;width:100px;border:1px solid red;" class="moreinfo"></div>
</div>
Update :
The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could give them a negative margin... in this example, You could change, in moreinfo, margin:0px to margin:-2px;.
There is fiddle example

Try like this:
<div class="moreinfo">
</div><div class="moreinfo"></div> <!-- Remove the spaces -->
CSS:
.moreinfo {
display:inline-block;
vertical-align: top;
margin:0px;
padding:0px; height:100px;
width:100px;
border:1px solid red;
}
For Reference: Try this Link

Related

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

Center an element

How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.
DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}
How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}
You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>
Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}

How to dynicamlly center the center of a div based on screen size

I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.
Here is my div css
.box
{
padding-top:20px;
padding-left:5px;
background-color: #ffffff;
background-color: rgba(221,221,221,0.5);
border: 1px solid black;
border-radius: 25px;
filter: alpha(opacity=90);
height: 125px;
width: 250px;
z-index: 1;
}
<form id="form1" runat="server">
<div id="box"><div>
</form>
Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.
Use position:absolute if you need it centred both horizontally and vertically:
#box {
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
/* etc */
}
http://jsfiddle.net/wcFMw/
To center horizontally:
margin:auto;
To center vertically:
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
You could also use position: fixed to make the div centered even when scrolling the page.
Also note that you'll have to use # instead of . to select by id. . is the CSS selector used for class.
JsFiddle
margin:0 auto;
Add this property to your css class.

Using CSS to allow boxes to stretch horizontally to the space given

I've been pondering how to execute this in CSS. Refer to the 2 images below. Imagine a 2 column layout, where left column may or may not be longer in height than the right column and vice versa. Now in the pictures these are the green and red colours. I have a comment box and a number of boxes (plural) which could be divs that need to stretch horizontally to the space given. So when the right column is longer, the boxes start small under the left. But when the left column is longer, the boxes (still) start on the left, but obviously take up the full size.
I would like to know how to achieve this for the grey boxes in CSS. I know javascript can do it, but a css example would help.
Both FelipeAI and Daneild's code is correct. I chose FelipeAI's because his code has one less rule and yet achieves the same thing.
How about this:
FIDDLE
Markup
<div class="wpr">
<div class="left"></div>
<div class="right high"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="left high"></div>
<div class="right"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
CSS
.wpr
{
width: 250px;
}
.left,
.right {
width: 100px;
height: 100px;
margin-bottom: 10px;
display: inline-block;
}
.left {
background: green;
float:left;
}
.right {
float: right;
margin-left: 50px;
background: brown;
}
.high {
height: 150px;
}
.comment {
clear: left;
overflow: hidden;
background: gray;
height: 60px;
margin-bottom: 10px;
}
(css modifications adapted from #FelipAls changes to my original fiddle)
Here's a fiddle : http://jsfiddle.net/dsScA/2/ where
all comments begin on left,
are constrained in width if there's a (long) right box along them
whether left or right can be longer than the other one
I adapted #Danield code but with clear: left on comments and there may be as many short comments alongside the taller right box as needed (last rule removed).
Get the height of both boxes and compare them. For the shorter one, append the additional content as often as desired (can even do some math if you want multiple items (e.g. how many of item x will fit under column a so that it is about the same size as column b). Does that make sense?
This should get you started:
var greenheight = $('#greenone').outerHeight(),
redheight = $('#redone').outerHeight(),
difference = Math.abs(greenheight - redheight),
fillerheight = $('#somehiddenfiller').outerHeight(),
howmanyfillers = Math.floor(difference/fillerheight);
Then iterate and dump into or after the shorter one using .append()
You may try to play with float, padding,margin and overflow to deal with flotting elements.
http://codepen.io/anon/pen/xCvzq
.box {
width:445px;
margin:auto;
padding:15px 0 0;
border:solid;
overflow:hidden;
}
.box > div {
margin:0 15px 15px ;
border:1px solid;
}
.green, .red {width:200px;}
div.green {
height:191px;
background:green;
float:left;
clear:both;
margin-right:0;
}
.box div.first {
height:115px;
}
div.red {
float:right;
height:191px;
background:red;
margin-left:11px;
}
div.comment {
overflow:hidden;
background:gray;
min-width:100px;
clear:left;
}

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>

Categories