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?).
Related
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;
}
I have some divs and buttons inside a div placed in a div with position: absolute, as in this jsfiddle
The code:
<div class="buttons">
<div class="button-line">
<div>Edit</div>
<div>Cancel</div>
<input type="submit" class="wd-edit" value="Submit">
</div>
</div>
Where:
.buttons {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 100%;
}
.button-line > * {
display: inline-block;
}
See the jsfiddle for complete content.
My problem is that whether I use display: inline-block of float-left for the childrens of the div .button-line, the buttons inside wrap, and I don't want that. I want the width of the .button-line div to adapt to the size of it's content, and all the buttons on the same line.
Thanks.
Try adding:
.button-line.b3 {
white-space:nowrap;
}
jsFiddle example
Is this the crux of what you need? Fiddle me this
Basically the meat of the operation is done with
white-space:nowrap;
I've taken off all of your styling so you can see what's going on more clearly.
I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:
<div id="avatar">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
<p>Text</p>
</div>
I want the input to be displayed over the image, also, the text need to be at the right. I tried using:
img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}
But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.
What is the best way to do this?
Obs.: The space where the button is, needs to be empty, or else, the text will move up.
This is how it's displayed on chrome:
This is how it's displayed on firefox:
You need to specify the x and y positions on an absolute position. Change the css for input to this:
input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.
Use a main DIV to contain everything and give it the position:relative property.
Place the img and input tags in a single DIV and assign this DIV the float:left property.
Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.
Here's an example:
<div id="avatar-container">
<div id="avatar-image-btn">
<img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
<input id="btnAvatar" class="button" type="button" name="Button" value="Change">
</div>
<p>Text</p>
</div>
<style>
#avatar-container { position: relative; }
#avatar-container p { float: left; }
#avatar-image-btn { float: left; }
#avatar-image-btn img { }
#avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>
See, clean and simple, works every time and is multi-browser compatible.
*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.
use z-index
input { position: absolute; margin:140px 0px 0px 130px; z-index:2}
this is pushing your button one layer up
after understanding the question correctly here is a solution
img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}
as mentioned bellow in comments the problem was in positioning
You may add position:relative for #avatar and give #btnAvatar top:0; left:0;
This should do it: http://jsfiddle.net/a6tA7/9/
I would recommend you use top: and left: to position the input element rather than margin:
I'm trying to display on one line:
a H1 element aligned to the left of the containing box
several "buttons" (A elements here) aligned to the right of the containing box
all being on the same baseline
Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.
<div id="block1">
<h1>What a great title</h1>
This link can kill you
Click if you dare
</div>
The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
http://jsfiddle.net/GlauberRocha/bUsvX/
Any idea?
I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:
Code:
<div id="side_bar" class="clearfix">
<h2 style="float: left;">Charity Map</h2>
<button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.
However, what you want can simply be accomplished using absolute positioning:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right">
This link can kill you
Click if you dare
</div>
</div>
If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:
<div style="position: relative;">
<h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
<div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
This link can kill you
Click if you dare
</div>
</div>
To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)
It's hard to achieve without any wrapping elements or fixed values...
Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.
Align your Links with 'display:block; float:right' to the right.
Now Set "line-height: 40px;" to both the heading and the links
Should work, but only when the size of the heading doesn't change....
One potential approach to this, depending on your exact needs, is to use a table layout:
#block3 {
display: table;
width: 100%;
box-sizing: border-box;
}
#block3 > * {
display: table-cell;
}
#block3 > *:last-child {
text-align: right;
}
JSFiddle: http://jsfiddle.net/bUsvX/39/
If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:
JSFiddle: http://jsfiddle.net/bUsvX/40/
I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;
example (with use of Twitter Bootstrap):
<h2 style="display:inline">Users</h2>
<i class="icon-download-alt"></i>XLS
<form style="display:inline; float:right;">
<input type="text" class="input-medium search-query" name="search">
<button class="btn" type="submit">Search</button>
</form>
I have several Razor pages in an MVC4 project that follow a general layout that can be viewed here. Each page will have a fieldset, and most will have either a Save or Next or whatever kind of button. What I'd really like and can't figure out is how to get the Save/Next/Whatever button to always position in the lower-right corner of the fieldset. I've attempted solutions from a couple of other questions, but sadly none seem to apply to this situation. Is this even possible?
Here's the stylesheet.
Put the fieldset in position:relative and put the button in Position:Aboslute with bottom:0 and right:0, this should work for one button, to place the others, do the same thing but change the right value to the combine width of the other buttons.
Example:
.lower-right-button{
position:absolute;
bottom: 0;
right: 0;
}
<fieldset style="position: relative">
<input type="submit" value="Save" class="lower-right-button">
<input type="submit" value="New" class="lower-right-button" style="right: 110 px">
</fieldset>
EDIT: The bottom and right attributes align the bottom and right edge of the element with the bottom and right edge of its container. In that case, bottom: 0 and right: 0 will place it at 0 pixel from the bottom-right corner, you might want to put something else like bottom: 5px right:5px
EDIT AGAIN: Fixed, initial proposition didn't work, here's a JSFiddle
EDIT ONCE AGAIN: With Romias proposition, put the button in a div and position the div at bottom right instead, here's the updated JSFiddle
Relative first, then absolute.
It's quite simple really. The first step is to set the parent container's position property to relative as follows:
<fieldset style="position: relative;">
...
</fieldset>
This will set the boundaries for your next element to be positioned, only this time, using absolute positioning.
<div style="position: absolute; bottom: 0; right: 0;">
<input type="submit" value="Save" />
</div>
Putting the two together:
<fieldset style="position: relative;">
...
<div style="position: absolute; bottom: 0; right: 0;">
<input type="submit" value="Save" />
</div>
</fieldset>
After this, you can add some margin to this div tag (or pull away from the bottom right corner a little) to add some padding, throw in some styles, etc.
use following CSS for buttons (please adjust margins)
position: relative;
margin-top: 45%;
margin-left: 90%;