I'd like to center a submit button. How do I accomplish this? I dont know the width of the button, it may be flexible based on the text inside it. I'm trying not to use float and set the margin auto on it because that will require a width.
<input type="submit" value="may vary" />
If the width is variable, your best bet is to use the text-align property of the container. If that would effect other sibling elements in an undesirable way, consider wrapping the input in a div.
<div style="text-align: center">
<input type="submit" value="may vary" />
</div>
NOTE: The inline CSS above is just an example, feel free to create a css rule for the div.
Related
In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.
Which attribute should I use to make the div's width match the input's size attribute?
code :
<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>
The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.
To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.
<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>
try width attribute in both i.e. in input and div also , plus try to give width in %
html:
<html>
<input id="myinput"></input>
<div id="myDiv"></div>
</html>
css :
#myDiv{
width:x%(set x per your requirement)
}
Use this style to set exact same width for both your input and your div
input#b, div#c {width:100px;}
It appears that it's awkward if you need a fluid-width text field with an add-on in Bootstrap 2.3.2.
If the containing div becomes smaller than the input field, an input with a span12 class on it will resize quite happily.
However, doing the same to this snippet is a bit more difficult
<div class="input-append">
<input type="text">
<span class="add-on">Sheep</span>
</div>
Does anyone have a solution to this?
Here's a fiddle: http://jsfiddle.net/KFr2z/149/
If you have input alone it is very easy to expand it to fit parent. It is also easy for more than one element if other has % width. Problem become if you have more than one element and other elements has fixed width or no explicitly determined width at all. Then you need an element which fit all parent's remaining space. From what I know it is impossible to make input to behave that way. But any native block-level element enclosing input should do the trick:
<div class="input-append">
<span class="add-on" style="float: right;">Sheep</span>
<div style="overflow: hidden;">
<input type="text" class="span12">
</div>
</div>
Bootstrap use some styles based on childs' order so you should also setborder-radius: 0 3px 3px 0 because it doesn't apply to add-on any more.
I'm modifying the header portion of a WordPress theme and I'm trying to nest a couple divs within another div. I'm not very experienced with HTML/CSS, but what I'm observing seems weird to me.
My code looks like this:
<div class="extras">
<div id="search">
<form role="search" method="get" id="searchform" action="http://mentatescholars.com/" >
<input type="search" placeholder="Search" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div><!-- end #search -->
<div class="phone-number">
<div class="phone-number-main">1-885-MENTATE</div>
<div class="phone-number-sub">1-885-636-8283</div>
</div>
</div>
And in the picture I have the phone-number div selected with Firefox's inspector (selecting extras looks the same). What strikes me as odd is why it's starting at the top of the extras div and not after the search div. search even has a set height of 40px.
If I select the third div, then the it shows the div starting right after the previous div.
What also strikes me as odd is how, while the top of the phone-number-main div is flush with extras, the text shifts down perfectly without me doing anything.
My question is this: How can I make it so that the phone-number div starts right after the search div?
Here's the site, if you want to look at it: http://mentatescholars.com/.
#search is floated and the .phone-number isn't.
If you add clear:both to the .phone-number <div /> you will see the correct layout.
float removes elements from the flow of the document. Check uot this link for more info: http://www.alistapart.com/articles/css-floats-101/
that is because you have floated element. your "search" div is floated and has no clear. Use clear:both in the CSS of the phone-number element and it will work fine
And if you want the number to be right after search make the height of search 30px and get rid of the submit button's margin bottom.
make #search block smaller by reducing height, lets say to 30px.
Quick CSS Question. I cannot seem to figure out a very simple CSS/HTML problem. Here's a JSFiddle.
http://jsfiddle.net/BmM6t/
Basically, these two divs are not resizing to anything less than 100% width:
<div id="main_pic" class="main_div">
THIS IS WHERE THE MAIN PIC WILL GO.
</div>
<div id="signin" class="main_div">
SIGN IN TO THE SITE!
<form>
<label for="name">EMAIL/USERNAME:</label>
<input type="text" name="name" id="name">
<label for="email">PASSWORD:</label>
<input type="text" name="email" id="email">
<br />
<input type="submit" value="Let's Play!">
</form>
</div>
You'll see that the two divs with class main_div actually take up the entire width of the screen for some reason (you can see that if you inspect the element) even though their widths are clearly written. When you try to change the width of one of the main_div's it changes the width but if you inspect the element, it just changes the width of the object and adds padding around it to make sure it still takes up the entire width of the screen.
I'm sure it's some little error I've made but I can't find it. Thanks for the help!
That's how divs work, they are block level elements. If you don't want them to take up the entire with of its container element you can float it or make it inline-block
Use a overflow: hidden; to the .main_div so that you can see that it is resizing but not hiding the contents.
Dear community members,
I would like to position the text inside test in the center of a div. The code would look like the following:
<div id="main" style="width: 960px;">
<form>
<label for="test">Testing everything:</label>
</form>
Now if I try the following section of code:
<label for="test" style="width: 100%; text-align:center;">Testing everything:</label>
It does not center the text inside my main layer. Do I need to put a layer arround the label tags making it:
<div style="width:100%; text-align:center;"><label for="test">Testing everything:</label></div>
What is the standard method to accomplish that?
Thank you for your responses!
Your problem is very simple : label is not a block-level tag, which means that you can't give label elements a width. In other words, the width of a label element is the width of its content.
In your case, that means that it doesn't fill the entire width of your "test" div and then can't be centered.
To fix this, just add the following CSS property to your label :
display: inline-block;
This way, your label will be considered as a block for everything width (and height) related and your 100% width will be applied successfully, leading to a nicely centered text.