I want center a DIV without having center effect to the elements inside the DIV.
In my case, i have this input (select): intl-tel-input
When i do this:
<center>
<div id="input">
<input id="phone" name="phone" type="tel">
</div>
</center>
The options of the select centered too, even the container of options changed position.
And here we have an example of the error: http://jsfiddle.net/DtMwr/15/
Thank's to help me to figure it out.
You can use CSS to center the form input. Something like this would work:
CSS
.center {
margin: auto;
width: 50%;
border: 3px solid #73AD21;
padding: 10px;
}
input[name=phone1] { width: 100%; }
HTML
<div class="center">
<input type="tel" placeholder="Primary Phone Number" class="input-large" id="p1" name="phone1"/>
</div>
That will center the div within its parent, and allow the input to expand to 100% of the parent div's width. You can adjust the width of the div based on the needs for your layout.
There's some good reading on it here: http://www.w3schools.com/css/css_align.asp
You can see it working in this JS Fiddle: http://jsfiddle.net/igor_9000/DtMwr/20/
Also, if you haven't already, you might look into using a framework like bootstrap, foundation, etc. They've got a good frameworks for implementing a layout that will save you some time.
Hope that helps!
First of all, don't use center as a tag. Just make it a regular div with an ID.
<div id="input_wrapper">
<div id="input">
<input id="phone" name="phone" type="tel">
</div>
</div>
Then, give the outer div a width of 100% and the inner div auto margins with a fixed width.
#input_wrapper {
width: 100%;
}
#input_wrapper #input {
margin-right: auto;
margin-left: auto;
width: 100px;
}
Related
I centered my form for laptop, with this .css code:
form{
position: absolute;
top: 40%;
left: 20%;
}
And here is the result:
this
But now, when I whatch it on my smartphone, I get this:
this
Which is not centered.
How would you center a form for every devices in Bootstrap/CSS ?
Add this class next to the row class: "justify-content-center". And delete "left: 20%" Like this:
<div class="container">
<form>
<div class="row justify-content-center">
<input type="text">
<input type="text">
<input type="text">
</div>
</form>
</div>
However, it won't success with absolute position. You may change that with relative position. Or check these: How to center absolutely positioned element in div? or How to center a "position: absolute" element
Add (left and right) margin: auto.
form{
margin: auto;
}
If you need top/bottom margin, set it like margin: 5px auto
This will center the form using your current setup:
form {
position: absolute;
top: 40%;
left: 0;
right: 0;
margin: auto;
}
But I would personally go with Atreidex's solution using existing Bootstrap classes (well, I personally wouldn't use Bootstrap, but if I already were using it, I would make use of its available classes rather than re-inventing the wheel - isn't that why you're using Bootstrap?).
I am trying to center an image (both horizontally and vertically) in a modal dialog body. I have tried every permutation of everything I know. top / left = 50%, margin 0 auto, class=center-block... Read through the bootstrap documentation and I am stumped. Here is my html... Any help would be greatly appreciated
<div id="processing" class="modal fade">
<div class="modal-dialog" style="max-width: 350px">
<div class="modal-content">
<div class="panel-heading modal-header dialog-header">
<h4 class="modal-title">Please Wait...</h4>
</div>
<div class="modal-body" style="height: 230px;">
<img src="~/images/ajax-loader.gif" class="img-responsive" />
</div>
</div>
</div>
</div>
EDIT:
Thank you Chun for the response, but it did not achieve the desired results.
Here is a link to 2 images. One is the result from Chun's suggestion, the other is a manipulated image to exhibit my desired result.
https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0
This will center the image inside of the modal.
.modal-body > .img-responsive {
display: block;
margin-left: auto;
margin-right: auto;
}
It must be working by adding more class :
<style>
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
========= Updated Answer ==========
I did see the image from your link going outside of your div container, here's what needs to be done in order to fix this problem. Forget all the code provided previously, let's start over. Giving a position:relative; to .modal-body will avoid the image of going outside of the container, here's an example:
.modal-body {
position:relative; /* This avoids whatever it's absolute inside of it to go off the container */
height: 250px; /* let's imagine that your login box height is 250px . This height needs to be added, otherwise .img-responsive will be like "Oh no, I need to be vertically aligned?! but from which value I need to be aligned??" */
}
Then, create your centered login image by styling the class .img-responsive
.img-responsive {
width:50px; /* This value will depend on what size you want for your loading image, let's say it's 50px */
height: 50px;
position:absolute;
left:50%;
top:50%;
margin-top:-25px; /* This needs to be half of the height */
margin-left:-25px; /* This needs to be half of the width */
}
Here's an example
I have a "wrapper" div, of let's say a width of 80%, around a div where I want to limit the width (a form for example) to 300px. When the controls are set to "fill" the width the controls overlap the "wrapper" div. I obviously find this ugly. I know I can set the overflow attribute to just add scrollbars, but what I'd really like to do is prevent the "wrapper" div from narrowing smaller than its content.
Give the wrapper a min-width of 300px along after the width 80%
Sounds like you need to set a min-width on your wrapper container. Here is a simple example:
HTML:
<div class="wrapper">
<form>
<input type="text">
<input type="text">
<button type="submit">Save</button>
</form>
</div>
CSS:
.wrapper {
width: 80%;
min-width: 300px; /*This should be at least as wide as your form, wider if you need extra room */
position: relative;
}
form {
width: 300px;
}
input {
width: 100%;
}
I've set up a simple jsfiddle to demonstrate: http://jsfiddle.net/MhxVz/
My markup looks like this:
<div id="content">
<img src="some_content.jpg">
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
The mark up for the form is generated by a CMS, so I cannot change it.
The content div has a fixed width and height so that I can center it vertically and horizontally in the page. Currently all children within content is set to display: inline-block and then aligned horizontally and vertically within the content div.
I have aligned the forgot your password link like this:
And here is the css for the link in question:
#forgot-password{
float: right;
margin: 0; /* reset some stuff inherited from parent */
padding: 0; /* reset some stuff inherited from parent */
margin-right: 171px;
margin-top: -20px;
}
Here are some relevant css:
#content{
position:absolute;
width: 650px;
left:50%;
top:50%;
height:242px;
margin-top:-126px;
margin-left: -325px;
text-align: center;
}
#content > *{
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
margin-left: 20px;
margin-right: 20px;
}
That all works well. However, in some cases, for example, if an error has occurred with the form submission, then an error message will be appended to the from in the <form> element by the backend.
In such a case, I want the link to be aligned like so:
The problem with my css as it stands is that the forgot password link is aligned from the bottom of its parent (content). I need to align it relative to the button.
My initial idea was that I will align the forgotyourpassword div straight under the form. Thus, if the size of the form changes when the error messages are added, the forgotyourpassword link will be pushed downwards.
I can then set margin-top to a negative amount of pixels which should then push my forgotyourpassword div back up x pixels, which will then align the element with the submit button no matter how tall the form has become.
I am finding that this is not the case:
In firefox 10, the forgotyourpassword div does not seem to get "pushed up" by a the amount of pixels I have defined once it overlaps with the content area of the form.
In IE9, the forgotyourpassword appears above the form!
Is there a way to do this with just CSS and having it work with IE7 and above and firefox?
#content form{
position: absolute;
top: 80px;
right: 0px;
}
#forgot-password{
height:80px;
}
If you try something like this, you take the form out of the flow, and the link will appear above it without any fine-tuning. Once the top value for #content form and the height value for #forgot-password match, you should be safe as houses.
In some cases, you could have issues with clearing the absolutely positioned div, but you say you're setting the height for #content, so it shouldn't be a problem here.
Since I am not able to change the markup for the form, I am not able to insert the div for forgotyourpassword as a child of the form.
So, I added a wrapper div:
<div id="content">
<img src="some_content.jpg">
<div id="wrapper>
<form action="...">
<input type="text" ... >
<input type="submit" ...>
</form>
<div id="forgotyourpassword">
Forgot your password?
</div>
</div>
</div>
Then is simply a matter of adjusting the margins for the forgotyourpassword div:
#forgotyourpassword{
float: left;
margin-top: 10px;
}
This is the best solution I can come up with now as the wrapper div does not add any sematic value to the document, but I don't think there would be an easy solution otherwise (until we can use math and get dimensions of elements in CSS).
I've looked at other questions and am unable to find the solution to this. Consider this image: mockup http://img201.imageshack.us/img201/935/image2h.png
I want to wrap divs and stack them vertically. The GREEN div would be a wrapper on a line. The BLUE div would contain an html label and maybe icon for a tooltip. The ORANGE div would contain some sort of entry (input, select, textarea).
Several of these would be stacked vertically to make up a form. I am doing this now, but I have to specify a height for the container div and that really needs to change depending on the content - considering any entry could land there. Images and other stuff could land here, as well.
I have a width set on the BLUE div and the ORANGE is float:left. How can I get rid of the height on divs and let that be determined by content? Is there a better way? Changing all to something else would be difficult and would prefer a way to style all elements or something.
The code I'm using is like:
<div class=EntLine>
<div class=EntLbl>
<label for="Name">Name</label>
</div>
<div class=EntFld>
<input type=text id="Name" />
</div>
</div>
The CSS looks like:
.EntLine {
height: 20px;
position: relative;
margin-top: 2px;
text-align: left;
white-space: nowrap;
}
.EntLbl {
float: left;
width: 120px;
padding: 3px 0px 0px 3px;
min-width: 120px;
max-width: 120px;
vertical-align: text-top;
}
.EntFld {
float: left;
height: 20px;
padding: 0px;
width: 200px;
}
Well, for a start I think you could use less mark-up to achieve your aim. You might have a good reason for wrapping a div around every element of your form, but if it's just to force a single label-input pair to each line then you can nest the input inside the label tag:
<label for="Name">Name
<input type="text" id="Name" />
</label>
This way you can use a simple:
label {display: block; }
to force each pair to their own line. This would also remove the need to float the labels, which removes the need to specify the height of any containing element.
You can still apply multiple classes to the relevant fields/labels, but it's far less trouble. Unless I'm really missing something.
Failing all of that, you could simply add an empty div (or other element), after the last of your fields and style with:
#empty_element {
disply: block;
height: 0;
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */
visibility: hidden;
}