I have two buttons on a webpage, I am trying to make the Clear button be a little lower, to align with the Search button. Why is the Clear button so high?
Here is a live example: http://www.davidjpotter.com/temp/test.php
<table border=1>
<tr>
<td>
<button type="submit">Search</button>
<img src="../images/button-clear.png">
</td>
</tr>
</table>
Replace this:
<img src="../images/button-clear.png">
with this:
<img src="../images/button-clear.png" style="vertical-align: bottom; ">
It's high because the default value of the vertical-align CSS property is baseline. This applies to all elements with display: inline, which includes <img> elements.
Try instead setting it to middle:
<img src="../images/button-clear.png" style="vertical-align:middle" />
This has to do with vertical alignment of the image which is an inline element and it's set to the baseline. Add 'vertical-align:bottom' to line them up.
Related
I'm creating an HTML table with JSP and the styles are using Bootstrap. I have two columns, one with a button and the other with text.
They're both intended to have the same padding in the table, 12px top and bottom. The button column does have that padding on both the top and the bottom, but the text part does not.
I think what's happening is that the second column's top padding gets set up the way it's intended, and then the rest of the padding just sort of fills in. I have two images and the code below.
The first image shows the padding around the button, and the second image shows the padding around the text.
<tbody>
<c:forEach items="${results.items}" var="result">
<tr>
<td>
<form action method="post" accept-charset="UTF-8">
<div hidden>
<input name="itemUri" value="${result.uri}">
</div>
<div class="buttons">
<input class="btn btn-info" type="submit" value="See">
</div>
</form>
</td>
<td>
<span class="align-middle v-100">Green Eggs and Ham</span>
</td>
</tr>
</c:forEach>
</tbody>
This won't change the padding, but the padding is ok for the button so you can hopefully just adjust the centering of the text.
Bootstrap add vertical-align: top to tds. You can adjust with
vertical-align: inherit
or
vertical-align: middle
The text still might not appear vertically centered, but it is aligned with the button's text. i think it then becomes of question of the button's padding and/or line-height.
I need to position this form into place on top of the image in sidebar of my blog posts page:
http://insightcxo.com/category/blog/
Right now the image and the form are in the same container but are below one another.
Your markup has several issues in it. This is what I'm seeing in the provided link:
<td align="center" valign="top">
<a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
<img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
</a>
<p></p>
<table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
<!-- form is in here -->
</table>
</td>
First, you've got an <a> tag with an <img> in it, which has a height of 400px. So that's pushing your <table> (which includes your <form>) down.
What you want to do is only have that image as a background image, and not a background of an <a> tag. That way, you can nest your <form> inside the container with the background image.
Something along the lines of this:
<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
<form></form>
</div>
Although a few extra pointers:
Don't use <table> tags for layout purposes. Only use them for actual data tables.
Avoid inline styles (I've done that above just to show you where the background image style should go. Instead, set a class, like .form-container, and apply your styles in a separate CSS file.
Avoid having extra markup. What's that empty <p> tag doing there?
I am trying to place a hyperlink vertically so it's to the middle of the height of a textbox but it's not working for me.
Here's the jsfiddle example. I want to do this without using Javascript, works in IE6+, the two elements need to be in the same td column, without using hard coded pixels, and the hyperlink to be right next to the right edge of the textbox (like it's shown in the example, just move it upward to the middle of the yellow box).
As long are the textarea and a elements are inline elements, they will share their base line. If you float the elements, you can set the line height of the a element to match the height of the textarea:
textarea { float :left; }
a { float: left; line-height: 6em; }
Demo: http://jsfiddle.net/Guffa/aLtXA/6/
Well, if you are willing to nest tables, this will work:
<table>
<tr style="vertical-align:top">
<td>
<table>
<tr style="width: 500px;">
<td>
<textarea cols="45" rows="5"></textarea>
</td>
<td style="background-color:yellow; vertical-align:middle">
Edit
</td>
</tr>
</table>
</td>
<td>
second cell
</td>
</tr>
</table>
but I hate this level of nested hell. It leads to madness and grey hair.
I hope someone will post a nicer answer.
Is it possible perhaps with the twitter bootstrap?
Here you go: http://jsfiddle.net/aLtXA/16/
I put vertical-align:middle on the TEXTBOX and anchor. As well, I removed the vertical-align from the table cell.
I can't get right positions for my tables. I have code like this:
<div style="width: 1270px;">
<div>
<table style="float:left>
<tr><td>something1</td></tr>
<tr><td>something2</td></tr>
</table>
<img src="some_sorce">
<table style="float:left>
<tr><td>something3</td></tr>
<tr><td>something4</td></tr>
</table>
</div>
</div>
And I have two problems:
First I want tables to be placed in bottom of containing div. I try some kind of "vertical-align" in some places but it fail for me. Secoundly i want the image to be in center of div, "text-align: center" don't do the trick. Could someone help me anyhow?
Instead of:
<table>
<img src="some_sorce">
it should be:
</table>
<img src="some_sorce">
And by default images have display: inline attribute so You need to do something like:
<img src="some_sorce" style="display: block">
to center image
I have a table column like this, where I want to align an image and a text.
The text must be in the middle of the image.
<td><img height='50px' src='blabla'>Hello</td>
The above aligns the text at the bottom of the image.
I have also tried adding vertical-align:middle to the td style property, without luck.
I have also tried adding a <font> and styling that to vertical-align:middle without luck.
I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.
Any ideas?
You have to add the vertical-align to the img, not the td:
<td>
<img style="vertical-align: middle;" src="test.jpg"/>
test
</td>
To apply the style to all images in tds, use an external CSS:
td img {
vertical-align: middle;
}
Have you tried using valign="middle"
<td valign="middle"><img height='50px' src='blabla'>Hello</td>
Also, no need to add "px" to the height of the img.
Here you go:
<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>
http://jsfiddle.net/FDRy8/
use vertical-align:middle on the image and not the td
td img{
vertical-align:middle;
}
working example at http://www.jsfiddle.net/gaby/pPVtH/
Add vertical-align to the row as well, not just the cell.