I am making an ASP.NET web control. In a table, how can I center a button?
Thanks
If you want to center an inline element set the container to:
text-align:center; eg:
<div style="text-align:center;"><input type="submit" value="Center Me!"></div>
If you want to center a block level element set it to:
margin:auto; eg:
<div style="margin:auto;">Im in the middle</div>
Easiest way is to put
<td align="center">
--content here--
</td>
This is very simple ..
<div>
//your html code ..
<table>
//data inside the table ..
<button align="center"> Click here </button>
</table>
</div>
Related
i have a html page in which i am showing two images ... i want to add the text between the images.. at the moment the images are displaying like this
i want to do something like this
how can i add a text or small image of VS here in the middle.
here is my code in jsfiddle
http://jsfiddle.net/Gd5Bg/
i am writing a small bit of code here because stack is not giving me the permission to add a jsfiddle link without the code here
<div class="image-galery">
<a class="group" rel="group1" href="img/4_b.jpg">
<img src="img/4_b.jpg" />
</a>
</div>
<div class="span5 galery" style="float:left">
.......
</div>
<div style="float:left;position:relative;top:150px;left:5px;">vs</div>
<div class="span5 galery" style="float:left">
.......
</div>
Put your elements in a table. Then use
<td style="vertical-align:middle"> ... </td>
To center everything vertically.
This is sort of a general web development question that I need some experts' advice on. This is probably quite a no brainer for some of you, but I am having trouble getting this to display properly.
I have a database table set up where each entry has 5 text fields, and one image. What I want to do is use the repeater to display the text on the left hand side of the div, and the image on the right hand side of the div (basically aligned with the center of the text).
Company Name
Description1
Description2
Description3 Image goes about here.
Description4
Description5
I have the repeater all configured properly and ready to go, it's displaying the text just fine in a well formatted way. However, I'm having trouble getting that image to display properly. Do I need to use text wrapping here to accomplish this? I'm pretty stuck and don't know where to proceed. I can post my ASP.net code here if desired.
Thank you so much in advance. Very helpful site for new programmers.
I'm assuming you can't set a fixed height on your column divs? Is so, and if you're happy to use an HTML table (many aren't) then your life will be much simpler than trying to vertically align an image inside a floated div using CSS. Try this:
<!DOCTYPE html>
<html>
<body>
<table style="width:960px; margin:auto 0;">
<tr>
<td style="width:75%;">
<asp:repeater...>
</asp:repeater>
</td>
<td style="width:25%;" valign="middle">
<asp:Image .../>
</td>
</tr>
</table>
Notice the valign="middle" attribute on the right td. Although valign is deprecated in HTML5, it still works in all modern browsers and all supported versions of IE.
NOTE: many will argue that tables aren't SEO friendly or that tables aren't intended for this, plus it's not strictly html5 compliant, so you'll need to way that up. Personally, because it just works and solves a simple problem that CSS can't without silly hacks, I'd use it without worrying too much.
If you want to have the div with the text inside to the left and the image to the right, you can use "Float: Left" to the div with the text inside and "float:right" to the div of the image. This should look like this :
<div style="float: left;"> <--- float:left
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right"> <--- float:right
<img src='...' />
</div>
And if you want to have an other div BUT not on the same line , you must add a "clear:both" to the new div :
<div style="float: left;">
<table>
<asp:Repeater ID="TournoiAvenirRep" runat="server">
<ItemTemplate>
<tr>
<td>...</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div style="float:right">
<img src='...' />
</div>
<div style="clear:both"> <------ here clear both
...
</div>
Hope this will help you ! , vinc
EDIT : If you want learn more about css positioning and float you can go to W3 school, they have some nice tuto about it.
This is a CSS issue. You'll need two floated divs, something like this:
<div class="clearfix">
<div style="float:left; width:75%;">
<asp:Repeater ID="MyRepeater" runat="server" [etc] />
</div>
<div style="float:right; width:25%;">
<asp:Image ID="MyImage" runat="server" [etc] />
</div>
</div>
If you want specific examples, please see http://www.vanseodesign.com/css/vertical-centering/.
I have 4 divs in my .html:
<div id="div">
<div class="contenido">1</div>
</div>
<div id="divSupIzq">
<div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
<div id="divSupDer">
<div class="contenidos">zona de</br>avisos</div>
</div>
<div id="divInfIzq">
<div class="contenidos">zona de</br>información</div>
</div>
In .css, I've applied border-radius in order to give these divs circular form.
I've applied text-align:center because I want the content of each div being centered
But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me...
I don't know if I'm explaining myself well...I try that yes.
Sorry for my bad english. Regards, Daniel
Live example: http://jsfiddle.net/cN2pS/
Another question: what tools do you use in order to test these type of apps for differents resolutions?
Use a table and set the align for each td center
<table>
<tr>
<td align="center">
Your text or elements
</td>
</tr>
</table>
Or set the div display as table-cell
I start with a td cell like this
<td>
<span>123</span>
<input style="display:none;">
</td>
I'm looking for a way to style this so that the orignal content is hidden, the input box is shown and overflowing instead of resizing the td, and keeping the td sized to just its original content.
State A, which I have now, looks like this
[123][45aaaaaaaaaaaaaaa6][7aaaaaa89]
I want state B to look like this
[*input text field*aaaaaaaaa6][7aaaaaa89]
<td>
<span>123</span>
<input style="display:none;">
</td>
Is the correction for your markup, but what exactly is the effect you want to achieve and what have you tried so far?
<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>
in style define :
#hidden{
display:none;
position:absolute;
margin:.5em;
}
make script that shows the div on over (you will need to include jquery js ...)
<script type="text/javascript">
$(document).ready(function(){
$('table tr td').children().find('div').hover(function(){
$(this).show();
}
)
});
</script>
Figured it out. What I did not realize is that an element with position:absolute cannot be assumed to be defaulting to a 0,0 position, so I need to set the Left to 0 explicitly
<td>
<div style="position: relative;">
<span style="visibility:hidden;">123</span>
<input style="position: absolute; left:0; display:inline;">
</div>
</td>
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }