I want to make a simple search form within a table cell:
<td style="vertical-align: center">
<div id="search">
<form action="search" method="get">
Search:
<input type="text" value="enter something" class="autoempty" />
<button type="submit"></button>
</form>
</div>
</td>
The button is supposed to have a search icon, using this CSS:
div#search button {
/*reset the normal button behavior*/
padding: 0px;
border-width: 0px;
border-style: none;
background-color: transparent;
/*Make it square*/
width: 30px;
height: 30px;
/*set background*/
background-image: url("../images/search_grey.png");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
/*fancy cursor*/
cursor: pointer;
}
This is what it looks like:
The colors show the element dimensions displayed by Firebug. Light-blue is the <td> element.
I hoped vertical-align property would fix it, but it didn't. I also had the same problems with adding <img> tags to text.
When I have similar alignment problems, especially when dealing with inline-block elements (not experienced enough to know how closely tables relate to that in terms of similarities), what usually helps me is some combination of:
vertical-align: top;
adjusting height:;
adjusting padding-top:; or more commonly, margin-top:; to re-align images from there
AKA: Instead of v-aligning center, v-align from top and use padding/margin to position from there. Hope this helps some.
Add this to your CSS
#search button, #serach input
{
display: inline-block;
vertical-align: middle;
}
Working Fiddle
Related
I'm trying to center an image inside a span. But it doesn't work.
Here is a link to my code: jsfiddle
<div>
<label>
<span>left span that can have more than one line</span>
<span><img class="redcross" /></span>
</label>
</div>
the class "redcross" is what I want to center vertically
can someone help me?
Change your css:
.button {
position:absolute;
width:24px;
height:100%;
top:3px;
right:0;
}
top 0 to 3px;
Remove right and margin-right, Add position: absolute and margin-top: -11px
.redcross {
float: right;
display: inline-block;
background-color: #94B548;
/*background-color: rgba(0,0,0,.3);*/
background-position: center center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E");
-webkit-border-radius: 1em;
border-radius: 1em;
content: "";
display: block;
width: 22px;
height: 22px;
top: 50%;
position: absolute;
margin-top: -11px;
}
jsfiddle
I'm sure Mr. Alien means well. But I was there too. Anyway, a simple steps to get what you are looking for:
Change your .button class to
.button {
vertical-align: middle;
width:24px;
}
You see, the vertical-align property doesn't quite work how some people think it does. It only affects inline elements. Furthermore, it aligns it vertical relative to the current line. So, in other words, if you were to say have more than one line on a block of text to the left and a button to the right, this wouldn't work.
You would need to wrap that block of text in an inline-block and adjust the line-height accordingly to get this same effect for it to be vertically aligned. Essentially, the two elements (block of text and img) would be behaving like text. This is important to understand especially in a screen responsive environment.
I would do it with flexbox.
It's a very recent feature but very useful.
Just add this lines to your .button class.
display: flex;
align-items: center;
Here you have it working. The green circle gets deformed but I would consider using a fixed image instead the border-radius.
Here you can see its browsers compatibility
I am pulling my hair out over the correct way to position two forms using html and css. I have tried both float and display:inline-block but only managed to get half of it working using one of the methods.
My target is to have the two forms display next to each other centered in a DIV that is only 70% of the page and each form takes up 50% of the available space. Both forms need to have a minimum width and should be pushed into separate lines if there isn't enough space to display both next to each other (i.e. when displaying the page on a phone in portrait mode)
If I float the two DIVs containing the forms they are displayed side by side but are not centered correctly (as they float either left or right and I need to set the size of each DIV to 40% or they don't fit next to each other).
If I use display:inline-block the DIVs are in the correct size and centered but are in two separate lines and not next to each other.
Here is the current code using display: inline-block
#background {
background-image: url(pic.jpg);
height: 400px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
}
#form-wrapper {
width: 70%;
margin: 0 auto;
text-align: center;
}
#form1 {
width: 50%;
display: inline-block;
}
#form2 {
width: 50%;
display: inline-block;
}
<div id="background">
<div id="form-wrapper">
<div id="form1">
<form>some form code here</form>
</div>
<div id="form2">
<form>some form code here</form>
</div>
</div>
</div>
Why are the forms on different lines when using display:inline-block ?
You might be having trouble getting the two inline-block elements next to each other because 50% times two plus the white space between the elements is greater than 100% of the container. Therefore, the second element doesn't have enough space and wraps to the next line.
inline-block elements will respect white space in the HTML code. The white space between the two elements is demonstrated below:
#background {
background-image: url(pic.jpg);
height: 400px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
}
#form-wrapper {
width: 70%;
margin: 0 auto;
text-align: center;
}
#form1 {
width: 40%;
display: inline-block;
background-color: #CCC;
}
#form2 {
width: 40%;
display: inline-block;
background-color: #CCC;
}
<div id="background">
<div id="form-wrapper">
<div id="form1">
<form>some form code here</form>
</div>
<div id="form2">
<form>some form code here</form>
</div>
</div>
</div>
So, one solution to your issue is to remove the white space, as shown below.
I have also given each element a minimum width so that they wrap to separate lines when the window is below a specified width. To see this action, click the "Full page" button in the upper right corner and resize your browser window.
#background {
background-image: url(pic.jpg);
height: 400px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
}
#form-wrapper {
width: 70%;
margin: 0 auto;
text-align: center;
}
#form1 {
width: 50%;
display: inline-block;
min-width:200px;
}
#form2 {
width: 50%;
display: inline-block;
min-width:200px;
}
<div id="background">
<div id="form-wrapper">
<div id="form1">
<form>some form code here</form>
</div><div id="form2">
<form>some form code here</form>
</div>
</div>
</div>
Use display:flex in your wrapper:
#form-wrapper {
width: 70%;
margin: 0 auto;
text-align: center;
display:flex;
}
JS BIN
Thanks a lot for your input! After looking at this issue for two days I was questioning basically anything but your examples showed that my original idea for the css using display: inline-block worked well.
The example at http://jsbin.com/qiraxo/2/ is exactly what I am looking for.
After digging some more I realized that one of my forms didn't work and even copying the working form in a second time didn't change the behaviour. So some more digging and I found the issue: a typo in a DIV declaration....
Thanks again and have a good evening.
I want to get my image behind my form but I can't get it right.
I hope someone can help me fix this because this looks awful.
These are mij codes:
<div id ="content">
<form>
<table>
<tr>
<td>
Gebruikersnaam
</td>
<td>
<input type ="text"/>
</td>
</tr>
<tr>
<td>
Paswoord
</td>
<td>
<input type ="password"/>
</td>
</tr>
</table>
</form>
</div>
#content {
clear: both;
margin: 0 auto;
width: 50%;
background-image:url('login.png');
background-repeat:no-repeat;
min-height: 461px;
}
You can find the example here.
Try background-position:center top; or background-position: top;
You could use a padding value on #content to push the form left and down.
I would also consider removing the table elements, it's never great for a layout to use tables. There are much better more consistent and flexible methods of achieving the same thing.
Also, try and post a live example or a JSfiddle so people can see your code in action.
Look at this example: http://jsfiddle.net/FdUgp/
#content {
clear: both;
margin: 0 auto;
width: 400px;
background-color: red;
background-repeat:no-repeat;
min-height: 300px;
text-align: center;
}
#content form {
text-align: left;
display: inline-block;
margin-top: 100px;
}
Put the width and the height of the #content with the exactlty same size of your image, and later change the margin-top of the form to match the position you want.
If you want some responsive this is a little more tricky.
Look the fiddle: http://jsfiddle.net/FdUgp/2/
Key points are:
background-size: cover for your image resize with the #content.
The :before pseudoelement to make height of the #content responsive.
The relative/absolute positioning of the form.
The text-align: center and the display:inline-block moved to the form/table instead of the content/form.
I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this:
To position it, I've used these properties:
#search-form input[type="text"] {
background: url('../images/icons.png') no-repeat left center;
background-position: 0px -30px;
border: 1px solid #a9e2ff;
padding: 3px;
width: 200px;
font-size: 1em;
padding-left: 20px;
}
But the background still appears at the top of the input box rather than aligned in the vertical middle and to the left. I've also tried doing:
background: url('../images/icons.png') no-repeat left middle;
but that doesn't work either.
If it matters, although I'm guessing it doesn't, here's my form markup:
<form action="/search" method="get" id="search-form">
<input type="text" placeholder="Search..." name="s">
</form>
Thanks for any help.
You declared background-position two times. The first one at the end of the background short-hand property, the second one on the next line. Solution: Split all single background rules like this (additionally, 0 -24px is the correct value):
#search-form input[type="text"] {
background-image: url('http://i.stack.imgur.com/MFpLm.png');
background-repeat: no-repeat;
background-position: 0 -24px;
border: 1px solid #a9e2ff;
padding: 3px;
width: 200px;
font-size: 1em;
padding-left: 20px;
}
And now you can face the real problem with your design: other sprites will be visible in the input area if there are no sufficient space between them.
I have a div with a height of 30px.
I want to add plain text to this div. How can I make the plain text appear on the center of my div?
i.e, the text will be shown 15px under the top of the div.
I tried a label with margin-top: 15; but it didn't work.
height: 30px; line-height: 30px; padding: 0;
Following CSS would work
text-align:center;
vertical-align:middle;
display:table-cell;
You can:
<div style="height:30px; line-height:30px; text-align:center;">
Label
</div>
Set the line-height of the text helps you to fit the height for one line only.
Although this is an old thread, I think a flex solution should also be presented.
If you style your div with
display: flex;
align-items: center;
it should work
Codesandbox
Use padding-top instead of margin-top. Remember that adding padding to the top is added to the height, so you need to reduce the amount that you use for padding from the height. If you just always want for the text to have 15px on top and bottom of it, just simply do:
padding: 15px 0px;
Without specifying height at all.
padding-top: 15px;
remove 15px from the height on the div to.
you should have a look at padding http://www.w3schools.com/css/css_padding.asp
if you want anything to be in center of it's parent, just give the parent specific width using style and give the child style="margin:0 auto".
good luck
The <label></label> Element is not a block level element it is an inline element.
Try this code
<div style="height:30px">
<label style="display:block; margin-top:15px;">
</label>
</div>
#MyDiv
{
background-image: url(images/pagedescription_bar.png);
background-repeat: repeat-x;
border-color: #868686;
border-width: thin;
border-style: solid;
border-style: none;
width: 1008px;
height:70px;
color: #FB8022;
font-size: 16px;
font-weight: bold;
}
#MyDiv label
{
width: 1008px;
text-align: center;
height: 70px;
vertical-align: middle;
display:table-cell;
}